@ngrok/mantle 0.79.3 → 0.80.0

package/dist/button-5WsvzIQ6.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-CGgMKpJg.js";import{t as n}from"./slot-CDk0Bb9z.js";import{t as r}from"./booleanish-BfvnW6vy.js";import{t as i}from"./clsx-DUGZgXfJ.js";import{Children as a,cloneElement as o,isValidElement as s}from"react";import c from"tiny-invariant";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";import{cva as f}from"class-variance-authority";import{CircleNotchIcon as p}from"@phosphor-icons/react/CircleNotch";const m=f(``,{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`},intent:{accent:``,danger:``,neutral:``},size:{xs:``,sm:``,md:``,lg:``,xl:``}},defaultVariants:{isLoading:!1,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`,intent:`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`,intent:`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`,intent:`danger`,class:`bg-filled-danger focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover border-transparent`},{appearance:`link`,intent:`danger`,class:`text-danger-600 focus-visible:ring-focus-danger`},{appearance:`ghost`,intent:`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`,intent:`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`,intent:`neutral`,class:`bg-filled-neutral not-disabled:hover:bg-filled-neutral-hover border-transparent focus-visible:border-transparent text-neutral-50`},{appearance:`link`,intent:`neutral`,class:`text-strong focus-visible:ring-focus-accent`}]}),h={xs:`ps-1.5`,sm:`ps-2`,md:`ps-2.5`,lg:`ps-3`,xl:`ps-3.5`},g={xs:`pe-1.5`,sm:`pe-2`,md:`pe-2.5`,lg:`pe-3`,xl:`pe-3.5`},_=({"aria-disabled":f,appearance:_,asChild:v,children:y,className:b,disabled:x,icon:S,iconPlacement:C=`start`,intent:w,isLoading:T=!1,ref:E,size:D=`md`,type:O,...k})=>{let A=r(f??x??T),j=T?u(p,{className:`animate-spin`}):S,M=j&&_!==`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`,m({appearance:_,intent:w,isLoading:T,size:D}),_!==`link`&&`font-sans`,M&&C===`start`&&h[D],M&&C===`end`&&g[D],b),"data-appearance":_,"data-disabled":A,"data-intent":w,"data-loading":T,"data-size":_===`link`?void 0:D,disabled:A,ref:E,...k};return v?(c(s(y)&&a.only(y),"When using `asChild`, Button must be passed a single child as a JSX tag."),u(n,{...N,children:o(y,{},d(l,{children:[j&&u(t,{svg:j,className:i(C===`end`&&`order-last`)}),y.props.children]}))})):d(`button`,{...N,type:O??`button`,children:[j&&u(t,{svg:j,className:i(C===`end`&&`order-last`)}),y]})};export{_ as t};

package/dist/{button-DcXOWUYo.d.ts → button-BPMwa2jN.d.ts}

@@ -1,5 +1,5 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
-import { r as VariantProps } from "./index-D47aqlpz.js";
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { r as VariantProps } from "./index-DA4ig3gj.js";
 import { t as ButtonIntent } from "./intents-DdSKSj1c.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/components/button/button.d.ts
@@ -126,6 +126,6 @@ type ButtonProps = ComponentProps<"button"> & Omit<ButtonVariants, "appearance"
  * <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>>;
+declare const Button: ({ "aria-disabled": _ariaDisabled, appearance, asChild, children, className, disabled: _disabled, icon: propIcon, iconPlacement, intent, isLoading, ref, size, type, ...props }: ButtonProps) => import("react").JSX.Element;
 //#endregion
 export { ButtonAppearance as n, ButtonProps as r, Button as t };

package/dist/button-D9n09xUg.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{jsx as n}from"react/jsx-runtime";import{cva as r}from"class-variance-authority";const i=r(`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:``}}}),a=({appearance:r,asChild:a,className:o,children:s,ref:c,...l})=>n(a?t:`div`,{"data-slot":`button-group`,className:e(i({appearance:r}),o),ref:c,...l,children:s});export{a as t};

package/dist/button.d.ts

@@ -1,6 +1,6 @@
 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-BvQvT790.js";
-import { n as ButtonGroupProps, t as ButtonGroup } from "./index-BSAizFod.js";
+import { n as ButtonAppearance, r as ButtonProps, t as Button } from "./button-BPMwa2jN.js";
+import { n as IconButtonAppearance, r as IconButtonProps, t as IconButton } from "./icon-button-C1AfGnQx.js";
+import { n as ButtonGroupProps, t as ButtonGroup } from "./index-C2jj8U4a.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-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};
+import{t as e}from"./icon-button-DiOhreJD.js";import{t}from"./button-5WsvzIQ6.js";import{t as n}from"./button-D9n09xUg.js";export{t as Button,n as ButtonGroup,e as IconButton};

package/dist/calendar.d.ts

@@ -28,8 +28,5 @@ type CalendarProps = ComponentProps<typeof DayPicker>;
  * https://github.com/ngrok/mantle/issues
  */
 declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): import("react").JSX.Element;
-declare namespace Calendar {
-  var displayName: string;
-}
 //#endregion
 export { Calendar, type CalendarProps, type DateRange };

package/dist/calendar.js

@@ -1 +1 @@
-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};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-CGgMKpJg.js";import{n}from"./icon-button-DiOhreJD.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})}export{c as Calendar};

package/dist/card.d.ts

@@ -1,9 +1,146 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
-import "./index-D47aqlpz.js";
-import { ComponentProps, HTMLAttributes } from "react";
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import "./index-DA4ig3gj.js";
+import { ComponentProps } from "react";
 //#region src/components/card/card.d.ts
 type CardProps = ComponentProps<"div"> & WithAsChild;
-type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;
+/**
+ * A container that can be used to display content in a box resembling a
+ * physical card. The root component of the all Card components.
+ *
+ * @see https://mantle.ngrok.com/components/structure/card#cardroot
+ *
+ * @example
+ * ```tsx
+ * <Card.Root>
+ *   <Card.Body>
+ *     <p>Laborum in aute officia adipisicing elit velit.</p>
+ *   </Card.Body>
+ * </Card.Root>
+ *
+ * <Card.Root>
+ *   <Card.Header>
+ *     <Card.Title>Card Title Here</Card.Title>
+ *   </Card.Header>
+ *   <Card.Body>
+ *     <p>Laborum in aute officia adipisicing elit velit.</p>
+ *   </Card.Body>
+ *   <Card.Footer>
+ *     <p>Card footer</p>
+ *   </Card.Footer>
+ * </Card.Root>
+ * ```
+ */
+declare const Root: {
+  ({ asChild, className, children, ref, ...rest }: CardProps): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The main content of a card. Usually composed as a direct child of a `Card` component.
+ *
+ * @see https://mantle.ngrok.com/components/structure/card#cardbody
+ *
+ * @example
+ * ```tsx
+ * <Card.Root>
+ *   <Card.Body>
+ *     <p>Laborum in aute officia adipisicing elit velit.</p>
+ *   </Card.Body>
+ * </Card.Root>
+ *
+ * <Card.Root>
+ *   <Card.Header>
+ *     <Card.Title>Card Title Here</Card.Title>
+ *   </Card.Header>
+ *   <Card.Body>
+ *     <p>Laborum in aute officia adipisicing elit velit.</p>
+ *   </Card.Body>
+ *   <Card.Footer>
+ *     <p>Card footer</p>
+ *   </Card.Footer>
+ * </Card.Root>
+ * ```
+ */
+declare const Body: {
+  ({ asChild, className, children, ref, ...rest }: CardProps): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The footer container of a card. Usually composed as a direct child of a `Card` component.
+ *
+ * @see https://mantle.ngrok.com/components/structure/card#cardfooter
+ *
+ * @example
+ * ```tsx
+ * <Card.Root>
+ *   <Card.Header>
+ *     <Card.Title>Card Title Here</Card.Title>
+ *   </Card.Header>
+ *   <Card.Body>
+ *     <p>Laborum in aute officia adipisicing elit velit.</p>
+ *   </Card.Body>
+ *   <Card.Footer>
+ *     <p>Card footer</p>
+ *   </Card.Footer>
+ * </Card.Root>
+ * ```
+ */
+declare const Footer: {
+  ({ asChild, className, children, ref, ...rest }: CardProps): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The header container of a card. Usually composed as a direct child of a `Card` component.
+ *
+ * @see https://mantle.ngrok.com/components/structure/card#cardheader
+ *
+ * @example
+ * ```tsx
+ * <Card.Root>
+ *   <Card.Header>
+ *     <Card.Title>Card Title Here</Card.Title>
+ *   </Card.Header>
+ *   <Card.Body>
+ *     <p>Laborum in aute officia adipisicing elit velit.</p>
+ *   </Card.Body>
+ *   <Card.Footer>
+ *     <p>Card footer</p>
+ *   </Card.Footer>
+ * </Card.Root>
+ * ```
+ */
+declare const Header: {
+  ({ asChild, className, children, ref, ...rest }: CardProps): import("react").JSX.Element;
+  displayName: string;
+};
+type CardTitleProps = ComponentProps<"h3"> & WithAsChild;
+/**
+ * The title of a card. Usually composed as a direct child of a `Card.Header`
+ * component.
+ * Renders as an `h3` element by default, but can be changed to any other
+ * element by using the `asChild` prop. It is preferred to use a heading element
+ * (h1-h6) for accessibility reasons.
+ *
+ * @see https://mantle.ngrok.com/components/structure/card#cardtitle
+ *
+ * @example
+ * ```tsx
+ * <Card.Root>
+ *   <Card.Header>
+ *     <Card.Title>Card Title Here</Card.Title>
+ *   </Card.Header>
+ *   <Card.Body>
+ *     <p>Laborum in aute officia adipisicing elit velit.</p>
+ *   </Card.Body>
+ *   <Card.Footer>
+ *     <p>Card footer</p>
+ *   </Card.Footer>
+ * </Card.Root>
+ * ```
+ */
+declare const Title: {
+  ({ className, asChild, ref, ...props }: CardTitleProps): import("react").JSX.Element;
+  displayName: string;
+};
 /**
  * A container that can be used to display content in a box resembling a
  * physical card.
@@ -56,7 +193,7 @@ declare const Card: {
    * </Card.Root>
    * ```
    */
-  readonly Root: import("react").ForwardRefExoticComponent<Omit<CardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Root: typeof Root;
   /**
    * The main content of a card.
    *
@@ -71,7 +208,7 @@ declare const Card: {
    * </Card.Root>
    * ```
    */
-  readonly Body: import("react").ForwardRefExoticComponent<Omit<CardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Body: typeof Body;
   /**
    * The footer container of a card.
    *
@@ -92,7 +229,7 @@ declare const Card: {
    * </Card.Root>
    * ```
    */
-  readonly Footer: import("react").ForwardRefExoticComponent<Omit<CardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Footer: typeof Footer;
   /**
    * The header container of a card.
    *
@@ -113,7 +250,7 @@ declare const Card: {
    * </Card.Root>
    * ```
    */
-  readonly Header: import("react").ForwardRefExoticComponent<Omit<CardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Header: typeof Header;
   /**
    * The title of a card.
    *
@@ -134,7 +271,7 @@ declare const Card: {
    * </Card.Root>
    * ```
    */
-  readonly Title: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & WithAsChild & import("react").RefAttributes<HTMLHeadingElement>>;
+  readonly Title: typeof Title;
 };
 //#endregion
 export { Card, type CardProps, type CardTitleProps };

package/dist/card.js

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

package/dist/centered-layout.d.ts

@@ -1,6 +1,192 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
 import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
+import { ComponentProps } from "react";
 //#region src/components/centered-layout/centered-layout.d.ts
+/**
+ * The outer frame of a centered page flow. Renders a `<div>` with
+ * `flex min-h-full flex-col` so it fills its nearest sized ancestor and stacks
+ * `CenteredLayout.Notice` and `CenteredLayout.Header` (pinned top),
+ * `CenteredLayout.Body` (which grows), and `CenteredLayout.Footer` (pinned
+ * bottom). Consumers whose host requires an exact height can merge `h-full`
+ * via `className` — `cx` is tailwind-merge-backed, so the override is
+ * deterministic.
+ *
+ * @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.Root>
+ *       <ThemeSwitcher.Trigger />
+ *       <ThemeSwitcher.Content />
+ *     </ThemeSwitcher.Root>
+ *   </CenteredLayout.Footer>
+ * </CenteredLayout.Root>
+ * ```
+ */
+declare const Root: {
+  ({ asChild, children, className, "data-slot": dataSlot, ...props }: ComponentProps<"div"> & WithAsChild & WithDataSlot): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * A full-window-width strip pinned above everything else in the layout —
+ * including `CenteredLayout.Header` — for impersonation notices, environment
+ * warnings, and similar app-wide messaging. Renders an unstyled `<div>`
+ * (`w-full shrink-0`): the notice content brings its own colors and layout,
+ * and the part collapses to nothing when empty, so it can stay mounted and
+ * conditionally render its contents. The same slot contract as the
+ * app-layout shell's notice strip, so an app-wide banner composes
+ * identically across mantle's layouts. Deliberately
+ * not named Banner — `CenteredLayout.Header` renders the page's `<header>`
+ * (the ARIA `banner` landmark), and this part is not that. Optional: omitting
+ * it is fine.
+ *
+ * On flows that scroll (checkout, plan pickers), the strip scrolls away with
+ * the page by default; merge `sticky top-0 z-20` via `className` to pin it to
+ * the window. To pin it alongside a sticky `Header`, wrap the two strips in
+ * a single `sticky top-0` container instead — two elements pinned at `top-0`
+ * overlap each other once the page scrolls.
+ *
+ * @see https://mantle.ngrok.com/layouts/centered-layout
+ *
+ * @example
+ * ```tsx
+ * <CenteredLayout.Root>
+ *   <CenteredLayout.Notice>
+ *     {isImpersonating && <ImpersonationBanner />}
+ *   </CenteredLayout.Notice>
+ *   <CenteredLayout.Body>
+ *     <Main>
+ *       <SignInCard />
+ *     </Main>
+ *   </CenteredLayout.Body>
+ * </CenteredLayout.Root>
+ * ```
+ */
+declare const Notice: {
+  ({ asChild, children, className, "data-slot": dataSlot, ...props }: ComponentProps<"div"> & WithAsChild & WithDataSlot): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * A utility strip at the top of the layout — an account chip, a close/dismiss
+ * button, and similar page furniture for focused flows (checkout, plan
+ * pickers). Renders a semantic `<header>` (a page-level frame, so it is
+ * exposed as a `banner` landmark when not nested inside a sectioning element)
+ * with `flex shrink-0 items-center px-4 py-4`. It sits **outside** the
+ * centered `flex-1` region, mirroring `CenteredLayout.Footer`. Optional:
+ * omitting it is fine.
+ *
+ * To pin it to the window while the page scrolls (e.g. a close button that
+ * stays reachable), merge `sticky top-0 z-10` via `className` — prefer
+ * `sticky` over `fixed`, which removes the strip from flow and underlaps the
+ * content below it.
+ *
+ * @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>
+ * ```
+ */
+declare const Header: {
+  ({ asChild, children, className, "data-slot": dataSlot, ...props }: ComponentProps<"header"> & WithAsChild & WithDataSlot): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The growing, centered region of the layout. Renders a `<div>` with
+ * `flex flex-1 flex-col items-center justify-center gap-6 py-4` so its
+ * children are centered in the space left over by `CenteredLayout.Header`
+ * and `CenteredLayout.Footer`. Content taller than the viewport top-flows
+ * and the page scrolls, because `Root` grows (`min-h-full`) instead of
+ * clipping.
+ *
+ * By convention the brand mark (a fully-styled logo/wordmark anchor) is the
+ * **first child** of `Body` — there is deliberately no `Logo` part because it
+ * would own nothing: vertical spacing comes from `Body`'s `gap-6`, and the
+ * mark arrives as already-styled JSX.
+ *
+ * @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.Root>
+ *       <ThemeSwitcher.Trigger />
+ *       <ThemeSwitcher.Content />
+ *     </ThemeSwitcher.Root>
+ *   </CenteredLayout.Footer>
+ * </CenteredLayout.Root>
+ * ```
+ */
+declare const Body: {
+  ({ asChild, children, className, "data-slot": dataSlot, ...props }: ComponentProps<"div"> & WithAsChild & WithDataSlot): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * A pinned utility strip at the bottom of the layout — a theme switcher,
+ * legal links, and similar page furniture. Renders a semantic `<footer>`
+ * (a page-level frame, so it is exposed as a `contentinfo` landmark — unlike
+ * `Card.Footer`'s generic div) with `flex shrink-0 items-center px-4 py-4`.
+ * It sits **outside** the centered `flex-1` region — which is exactly why
+ * `Body` exists as a separate part. 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.Root>
+ *       <ThemeSwitcher.Trigger />
+ *       <ThemeSwitcher.Content />
+ *     </ThemeSwitcher.Root>
+ *   </CenteredLayout.Footer>
+ * </CenteredLayout.Root>
+ * ```
+ */
+declare const Footer: {
+  ({ asChild, children, className, "data-slot": dataSlot, ...props }: ComponentProps<"footer"> & WithAsChild & WithDataSlot): import("react").JSX.Element;
+  displayName: string;
+};
 /**
  * A viewport-filling centered page flow for sign-in, sign-up, onboarding,
  * 404, checkout, and other focused full-page states. It owns structure only —
@@ -14,6 +200,7 @@ import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
  * Composition:
  * ```
  * CenteredLayout.Root
+ * ├── CenteredLayout.Notice
  * ├── CenteredLayout.Header
  * ├── CenteredLayout.Body
  * └── CenteredLayout.Footer
@@ -43,9 +230,9 @@ import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
 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.
+   * (`min-h-full`) and stacks `Notice` and `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
    *
@@ -70,7 +257,36 @@ declare const CenteredLayout: {
    * </CenteredLayout.Root>
    * ```
    */
-  readonly Root: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Root: typeof Root;
+  /**
+   * A full-window-width strip pinned above everything else in the layout —
+   * including `Header` — for impersonation notices and environment warnings.
+   * Renders an unstyled `<div>` (`w-full shrink-0`): the notice content
+   * brings its own colors, and the part collapses to nothing when empty. The
+   * same slot contract as the app-layout shell's notice strip, so an
+   * app-wide banner composes identically across mantle's layouts. Merge
+   * `sticky top-0 z-20` via `className` to pin it while a long flow scrolls
+   * (to pin it alongside a sticky `Header`, wrap the two strips in a single
+   * `sticky top-0` container instead — two elements pinned at `top-0`
+   * overlap once the page scrolls). Optional — omitting it is fine.
+   *
+   * @see https://mantle.ngrok.com/layouts/centered-layout
+   *
+   * @example
+   * ```tsx
+   * <CenteredLayout.Root>
+   *   <CenteredLayout.Notice>
+   *     {isImpersonating && <ImpersonationBanner />}
+   *   </CenteredLayout.Notice>
+   *   <CenteredLayout.Body>
+   *     <Main>
+   *       <SignInCard />
+   *     </Main>
+   *   </CenteredLayout.Body>
+   * </CenteredLayout.Root>
+   * ```
+   */
+  readonly Notice: typeof Notice;
   /**
    * A utility strip at the top of the layout (account chip, close button)
    * rendered as a semantic `<header>` (`banner` landmark) outside the
@@ -95,7 +311,7 @@ declare const CenteredLayout: {
    * </CenteredLayout.Root>
    * ```
    */
-  readonly Header: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLElement>>;
+  readonly Header: typeof Header;
   /**
    * The growing, centered region of the layout. By convention the brand mark
    * (a fully-styled logo/wordmark anchor) is its **first child** — spacing
@@ -124,7 +340,7 @@ declare const CenteredLayout: {
    * </CenteredLayout.Root>
    * ```
    */
-  readonly Body: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Body: typeof Body;
   /**
    * A pinned utility strip (theme switcher, legal links) rendered as a
    * semantic `<footer>` (`contentinfo` landmark) outside the centered
@@ -153,7 +369,7 @@ declare const CenteredLayout: {
    * </CenteredLayout.Root>
    * ```
    */
-  readonly Footer: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & WithAsChild & WithDataSlot, "ref"> & import("react").RefAttributes<HTMLElement>>;
+  readonly Footer: typeof Footer;
 };
 //#endregion
 export { CenteredLayout };

package/dist/centered-layout.js

@@ -1 +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};
+import{t as e}from"./cx-IiQEAKf5.js";import{n as t,t as n}from"./slot-CDk0Bb9z.js";import{jsx as r}from"react/jsx-runtime";const i=({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`centered-layout`),className:e(`flex min-h-full flex-col`,o),...c,children:a});i.displayName=`CenteredLayout`;const a=({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"data-slot":t(s,`centered-layout-notice`),className:e(`w-full shrink-0`,o),...c,children:a});a.displayName=`CenteredLayoutNotice`;const o=({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`header`,{"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=({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`div`,{"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=({asChild:i,children:a,className:o,"data-slot":s,...c})=>r(i?n:`footer`,{"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:i,Notice:a,Header:o,Body:s,Footer:c};export{l as CenteredLayout};

package/dist/checkbox-Cq17y0-R.js

@@ -0,0 +1 @@
+import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./clsx-DUGZgXfJ.js";import{a as n,r}from"./validation-Bpptk_9t.js";import{useEffect as i,useRef as a,useState as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=e=>e===`indeterminate`,l=({"aria-invalid":l,className:u,checked:d,defaultChecked:f,defaultValue:p=`on`,onClick:m,readOnly:h,ref:g,validation:_,...v})=>{let y=a(null),[b]=o(f),x=n(),{ariaInvalid:S,validation:C}=r({"aria-invalid":l,validation:_??x}),w=d??b;i(()=>{y.current&&(y.current.indeterminate=c(w))},[w]);let T=d==null?{defaultChecked:c(b)?void 0:b}:{checked:!c(d)&&d};return s(`input`,{"aria-checked":c(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,g),type:`checkbox`,...v})};function u({allSelected:e,someSelected:t}){return e?!0:t?`indeterminate`:!1}export{u as n,l as t};

package/dist/checkbox.d.ts

@@ -1,6 +1,17 @@
 import { o as WithValidation } from "./validation-7QeiTFwl.js";
+import { ComponentProps } from "react";
 //#region src/components/checkbox/checkbox.d.ts
 type CheckedState = boolean | "indeterminate";
+type Props = Omit<ComponentProps<"input">, "type" | "checked" | "defaultChecked"> & WithValidation & {
+  /**
+   * The controlled checked state of the checkbox. Must be used in conjunction with onChange.
+   */
+  checked?: CheckedState;
+  /**
+   * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
+   */
+  defaultChecked?: CheckedState;
+};
 /**
  * A form control that allows the user to toggle between checked and not checked.
  * Supports indeterminate state.
@@ -21,16 +32,7 @@ type CheckedState = boolean | "indeterminate";
  * </form>
  * ```
  */
-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.
-   */
-  checked?: CheckedState;
-  /**
-   * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
-   */
-  defaultChecked?: CheckedState;
-} & import("react").RefAttributes<HTMLInputElement>>;
+declare const Checkbox: ({ "aria-invalid": _ariaInvalid, className, checked: _checked, defaultChecked: _defaultChecked, defaultValue, onClick, readOnly, ref, validation: _validation, ...props }: Props) => import("react").JSX.Element;
 /**
  * Resolve the tri-state `checked` value for a "select all" checkbox from the
  * current selection counts: `true` when everything is selected,

package/dist/checkbox.js

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

package/dist/choice-Cc8dA5r8.js

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