@ngrok/mantle 0.76.1 → 0.76.2

package/dist/agent.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ngrok/mantle",
-	"version": "0.76.1",
+	"version": "0.76.2",
 	"origin": "https://mantle.ngrok.com",
 	"endpoints": {
 		"docs": "https://mantle.ngrok.com/",

package/dist/alert.d.ts

@@ -1,6 +1,6 @@
 import { t as SvgAttributes } from "./types-BvUzforF.js";
 import { t as WithAsChild } from "./as-child-uN_018tj.js";
-import { n as IconButtonProps } from "./icon-button-Ct3A7aoj.js";
+import { n as IconButtonProps } from "./icon-button-ntupABbM.js";
 import { ComponentProps, HTMLAttributes, ReactNode } from "react";
 
 //#region src/components/alert/alert.d.ts

package/dist/button.d.ts

@@ -1,4 +1,4 @@
-import { n as IconButtonProps, t as IconButton } from "./icon-button-Ct3A7aoj.js";
+import { n as IconButtonProps, t as IconButton } from "./icon-button-ntupABbM.js";
 import { n as ButtonProps, t as Button } from "./button-BYZOBUgj.js";
 import { n as ButtonGroupProps, t as ButtonGroup } from "./index-DBZ3eRsl.js";
 export { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, IconButton, type IconButtonProps };

package/dist/command.d.ts

@@ -135,7 +135,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+  }, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -243,7 +243,7 @@ declare const Command: {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+  }, "key" | "asChild" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
     value?: string;
     onValueChange?: (search: string) => void;
   } & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -285,7 +285,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+  }, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
   } & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   /**
@@ -326,7 +326,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  }, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * The group component for the Command component.
    *
@@ -365,7 +365,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
+  }, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -408,7 +408,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
+  }, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "value" | "disabled"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
@@ -484,7 +484,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+  }, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild"> & {
     alwaysRender?: boolean;
   } & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };

package/dist/dialog.d.ts

@@ -1,5 +1,5 @@
 import { n as isDialogOverlayTarget, t as Root } from "./primitive-FoWela9a.js";
-import { n as IconButtonProps } from "./icon-button-Ct3A7aoj.js";
+import { n as IconButtonProps } from "./icon-button-ntupABbM.js";
 import { ComponentProps } from "react";
 
 //#region src/components/dialog/dialog.d.ts

package/dist/empty.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-CBSnSC36.js";import{t}from"./svg-only-Cz1cby8y.js";import{t as n}from"./slot-CV5fmqFr.js";import{jsx as r}from"react/jsx-runtime";const i=({asChild:t,children:i,className:a,...o})=>r(t?n:`div`,{"data-slot":`empty`,className:e(`mx-auto flex max-w-lg flex-col items-center py-14 text-center`,a),...o,children:i});i.displayName=`Empty`;const a=({className:n,svg:i,...a})=>r(t,{"data-slot":`empty-icon`,className:e(`mb-2 size-16 text-muted`,n),svg:i,...a});a.displayName=`EmptyIcon`;const o=({asChild:t,children:i,className:a,...o})=>r(t?n:`h3`,{"data-slot":`empty-title`,className:e(`text-strong text-xl font-medium`,a),...o,children:i});o.displayName=`EmptyTitle`;const s=({asChild:t,children:i,className:a,...o})=>r(t?n:`div`,{"data-slot":`empty-description`,className:e(`text-body mt-1 space-y-4 text-sm`,a),...o,children:i});s.displayName=`EmptyDescription`;const c=({asChild:t,children:i,className:a,...o})=>r(t?n:`div`,{"data-slot":`empty-actions`,className:e(`mt-4 flex items-center gap-2`,a),...o,children:i});c.displayName=`EmptyActions`;const l={Root:i,Icon:a,Title:o,Description:s,Actions:c};export{l as Empty};
+import{t as e}from"./cx-CBSnSC36.js";import{t}from"./svg-only-Cz1cby8y.js";import{t as n}from"./slot-CV5fmqFr.js";import{jsx as r}from"react/jsx-runtime";const i=({asChild:t,children:i,className:a,...o})=>r(t?n:`div`,{"data-slot":`empty`,className:e(`mx-auto flex max-w-lg flex-col items-center p-6 text-center`,a),...o,children:i});i.displayName=`Empty`;const a=({className:n,svg:i,...a})=>r(t,{"data-slot":`empty-icon`,className:e(`mb-1 size-10 text-neutral-400`,n),svg:i,...a});a.displayName=`EmptyIcon`;const o=({asChild:t,children:i,className:a,...o})=>r(t?n:`h3`,{"data-slot":`empty-title`,className:e(`text-strong text-sm font-medium font-sans`,a),...o,children:i});o.displayName=`EmptyTitle`;const s=({asChild:t,children:i,className:a,...o})=>r(t?n:`div`,{"data-slot":`empty-description`,className:e(`text-muted space-y-4 text-sm font-sans`,a),...o,children:i});s.displayName=`EmptyDescription`;const c=({asChild:t,children:i,className:a,...o})=>r(t?n:`div`,{"data-slot":`empty-actions`,className:e(`mt-4 flex items-center gap-2`,a),...o,children:i});c.displayName=`EmptyActions`;const l={Root:i,Icon:a,Title:o,Description:s,Actions:c};export{l as Empty};
 //# sourceMappingURL=empty.js.map

package/dist/empty.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty.js","names":[],"sources":["../src/components/empty/empty.tsx"],"sourcesContent":["import type { ComponentProps, HTMLAttributes, ReactNode } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Slot } from \"../slot/index.js\";\n\n/**\n * The root container for an empty state. Centers content horizontally\n * with consistent vertical padding and max-width.\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n *   <Empty.Icon svg={<GhostIcon />} />\n *   <Empty.Title>No results found</Empty.Title>\n *   <Empty.Description>Try adjusting your search or filters.</Empty.Description>\n *   <Empty.Actions>\n *     <Button>Clear filters</Button>\n *   </Empty.Actions>\n * </Empty.Root>\n * ```\n */\nconst Root = ({ asChild, children, className, ...props }: ComponentProps<\"div\"> & WithAsChild) => {\n\tconst Comp = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Comp\n\t\t\tdata-slot=\"empty\"\n\t\t\tclassName={cx(\"mx-auto flex max-w-lg flex-col items-center py-14 text-center\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Comp>\n\t);\n};\nRoot.displayName = \"Empty\";\n\ntype EmptyIconProps = Omit<SvgAttributes, \"children\"> & {\n\t/**\n\t * A single SVG icon element.\n\t */\n\tsvg: ReactNode;\n};\n\n/**\n * Renders a large icon for the empty state. Pass a single SVG icon element\n * via the `svg` prop (e.g. from `@phosphor-icons/react`).\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n *   <Empty.Icon svg={<GhostIcon />} />\n *   <Empty.Title>No endpoints yet</Empty.Title>\n *   <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n *   <Empty.Actions>\n *     <Button>Create endpoint</Button>\n *   </Empty.Actions>\n * </Empty.Root>\n * ```\n */\nconst Icon = ({ className, svg, ...props }: EmptyIconProps) => {\n\treturn (\n\t\t<SvgOnly\n\t\t\tdata-slot=\"empty-icon\"\n\t\t\tclassName={cx(\"mb-2 size-16 text-muted\", className)}\n\t\t\tsvg={svg}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nIcon.displayName = \"EmptyIcon\";\n\n/**\n * The heading text for the empty state. Renders as an `h3` by default. Use the\n * `asChild` prop to render as a different heading level (e.g. `h1`, `h2`).\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n *   <Empty.Icon svg={<GhostIcon />} />\n *   <Empty.Title>No endpoints yet</Empty.Title>\n *   <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n *   <Empty.Actions>\n *     <Button>Create endpoint</Button>\n *   </Empty.Actions>\n * </Empty.Root>\n *\n * <Empty.Title asChild>\n *   <h2>No results found</h2>\n * </Empty.Title>\n * ```\n */\nconst Title = ({\n\tasChild,\n\tchildren,\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLHeadingElement> & WithAsChild) => {\n\tconst Comp = asChild ? Slot : \"h3\";\n\n\treturn (\n\t\t<Comp\n\t\t\tdata-slot=\"empty-title\"\n\t\t\tclassName={cx(\"text-strong text-xl font-medium\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Comp>\n\t);\n};\nTitle.displayName = \"EmptyTitle\";\n\n/**\n * Supporting descriptive text below the title. Renders as a `div` with\n * `space-y-4` so multiple paragraphs can be placed inside. Use the `asChild`\n * prop to render as a different element.\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n *   <Empty.Icon svg={<GhostIcon />} />\n *   <Empty.Title>No endpoints yet</Empty.Title>\n *   <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n *   <Empty.Actions>\n *     <Button>Create endpoint</Button>\n *   </Empty.Actions>\n * </Empty.Root>\n *\n * <Empty.Description>\n *   <p>Something went wrong.</p>\n *   <p>Please try again in a few minutes.</p>\n * </Empty.Description>\n * ```\n */\nconst Description = ({\n\tasChild,\n\tchildren,\n\tclassName,\n\t...props\n}: ComponentProps<\"div\"> & WithAsChild) => {\n\tconst Comp = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Comp\n\t\t\tdata-slot=\"empty-description\"\n\t\t\tclassName={cx(\"text-body mt-1 space-y-4 text-sm\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Comp>\n\t);\n};\nDescription.displayName = \"EmptyDescription\";\n\n/**\n * A container for action buttons or links in the empty state.\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n *   <Empty.Icon svg={<GhostIcon />} />\n *   <Empty.Title>No endpoints yet</Empty.Title>\n *   <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n *   <Empty.Actions>\n *     <Button>Create endpoint</Button>\n *     <Button appearance=\"outlined\">Go back</Button>\n *   </Empty.Actions>\n * </Empty.Root>\n * ```\n */\nconst Actions = ({\n\tasChild,\n\tchildren,\n\tclassName,\n\t...props\n}: ComponentProps<\"div\"> & WithAsChild) => {\n\tconst Comp = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Comp\n\t\t\tdata-slot=\"empty-actions\"\n\t\t\tclassName={cx(\"mt-4 flex items-center gap-2\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Comp>\n\t);\n};\nActions.displayName = \"EmptyActions\";\n\n/**\n * Compound component for rendering empty states. Use with `Empty.Root`,\n * `Empty.Icon`, `Empty.Title`, `Empty.Description`, and `Empty.Actions`.\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * Composition:\n * ```\n * Empty.Root\n * ├── Empty.Icon\n * ├── Empty.Title\n * ├── Empty.Description\n * └── Empty.Actions\n * ```\n *\n * @example\n * ```tsx\n * <Empty.Root>\n *   <Empty.Icon svg={<GhostIcon />} />\n *   <Empty.Title>No endpoints yet</Empty.Title>\n *   <Empty.Description>\n *     Create your first endpoint to get started.\n *   </Empty.Description>\n *   <Empty.Actions>\n *     <Button>Create endpoint</Button>\n *   </Empty.Actions>\n * </Empty.Root>\n * ```\n */\nconst Empty = {\n\t/**\n\t * The root container for an empty state. Centers content vertically and\n\t * horizontally with consistent padding and max-width.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t *   <Empty.Icon svg={<GhostIcon />} />\n\t *   <Empty.Title>No endpoints yet</Empty.Title>\n\t *   <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t *   <Empty.Actions>\n\t *     <Button>Create endpoint</Button>\n\t *   </Empty.Actions>\n\t * </Empty.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Renders a large icon for the empty state. Pass a single SVG icon element\n\t * via the `svg` prop.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t *   <Empty.Icon svg={<GhostIcon />} />\n\t *   <Empty.Title>No endpoints yet</Empty.Title>\n\t *   <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t *   <Empty.Actions>\n\t *     <Button>Create endpoint</Button>\n\t *   </Empty.Actions>\n\t * </Empty.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The heading text for the empty state. Renders as an `h3` by default.\n\t * Use `asChild` to render as a different heading level.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t *   <Empty.Icon svg={<GhostIcon />} />\n\t *   <Empty.Title>No endpoints yet</Empty.Title>\n\t *   <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t *   <Empty.Actions>\n\t *     <Button>Create endpoint</Button>\n\t *   </Empty.Actions>\n\t * </Empty.Root>\n\t *\n\t * <Empty.Title asChild>\n\t *   <h2>No results found</h2>\n\t * </Empty.Title>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * Supporting descriptive text below the title. Renders as a `div` with\n\t * `space-y-4` for multiple paragraphs. Use `asChild` to render as a\n\t * different element.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t *   <Empty.Icon svg={<GhostIcon />} />\n\t *   <Empty.Title>No endpoints yet</Empty.Title>\n\t *   <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t *   <Empty.Actions>\n\t *     <Button>Create endpoint</Button>\n\t *   </Empty.Actions>\n\t * </Empty.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * A container for action buttons or links in the empty state.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t *   <Empty.Icon svg={<GhostIcon />} />\n\t *   <Empty.Title>No endpoints yet</Empty.Title>\n\t *   <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t *   <Empty.Actions>\n\t *     <Button>Create endpoint</Button>\n\t *   </Empty.Actions>\n\t * </Empty.Root>\n\t * ```\n\t */\n\tActions,\n} as const;\n\nexport {\n\t//,\n\tEmpty,\n};\n"],"mappings":"0JAyBA,MAAM,GAAQ,CAAE,UAAS,WAAU,YAAW,GAAG,KAI/C,EAHY,EAAU,EAAO,MAG7B,CACC,YAAU,QACV,UAAW,EAAG,gEAAiE,CAAS,EACxF,GAAI,EAEH,UACI,CAAA,EAGR,EAAK,YAAc,QA2BnB,MAAM,GAAQ,CAAE,YAAW,MAAK,GAAG,KAEjC,EAAC,EAAD,CACC,YAAU,aACV,UAAW,EAAG,0BAA2B,CAAS,EAC7C,MACL,GAAI,CACJ,CAAA,EAGH,EAAK,YAAc,YAwBnB,MAAM,GAAS,CACd,UACA,WACA,YACA,GAAG,KAKF,EAHY,EAAU,EAAO,KAG7B,CACC,YAAU,cACV,UAAW,EAAG,kCAAmC,CAAS,EAC1D,GAAI,EAEH,UACI,CAAA,EAGR,EAAM,YAAc,aA0BpB,MAAM,GAAe,CACpB,UACA,WACA,YACA,GAAG,KAKF,EAHY,EAAU,EAAO,MAG7B,CACC,YAAU,oBACV,UAAW,EAAG,mCAAoC,CAAS,EAC3D,GAAI,EAEH,UACI,CAAA,EAGR,EAAY,YAAc,mBAoB1B,MAAM,GAAW,CAChB,UACA,WACA,YACA,GAAG,KAKF,EAHY,EAAU,EAAO,MAG7B,CACC,YAAU,gBACV,UAAW,EAAG,+BAAgC,CAAS,EACvD,GAAI,EAEH,UACI,CAAA,EAGR,EAAQ,YAAc,eAgCtB,MAAM,EAAQ,CAmBb,OAmBA,OAuBA,QAoBA,cAkBA,SACD"}
+{"version":3,"file":"empty.js","names":[],"sources":["../src/components/empty/empty.tsx"],"sourcesContent":["import type { ComponentProps, HTMLAttributes, ReactNode } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Slot } from \"../slot/index.js\";\n\n/**\n * The root container for an empty state. Centers content horizontally\n * with consistent vertical padding and max-width.\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n *   <Empty.Icon svg={<GhostIcon />} />\n *   <Empty.Title>No results found</Empty.Title>\n *   <Empty.Description>Try adjusting your search or filters.</Empty.Description>\n *   <Empty.Actions>\n *     <Button>Clear filters</Button>\n *   </Empty.Actions>\n * </Empty.Root>\n * ```\n */\nconst Root = ({ asChild, children, className, ...props }: ComponentProps<\"div\"> & WithAsChild) => {\n\tconst Comp = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Comp\n\t\t\tdata-slot=\"empty\"\n\t\t\tclassName={cx(\"mx-auto flex max-w-lg flex-col items-center p-6 text-center\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Comp>\n\t);\n};\nRoot.displayName = \"Empty\";\n\ntype EmptyIconProps = Omit<SvgAttributes, \"children\"> & {\n\t/**\n\t * A single SVG icon element.\n\t */\n\tsvg: ReactNode;\n};\n\n/**\n * Renders a large icon for the empty state. Pass a single SVG icon element\n * via the `svg` prop (e.g. from `@phosphor-icons/react`).\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n *   <Empty.Icon svg={<GhostIcon />} />\n *   <Empty.Title>No endpoints yet</Empty.Title>\n *   <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n *   <Empty.Actions>\n *     <Button>Create endpoint</Button>\n *   </Empty.Actions>\n * </Empty.Root>\n * ```\n */\nconst Icon = ({ className, svg, ...props }: EmptyIconProps) => {\n\treturn (\n\t\t<SvgOnly\n\t\t\tdata-slot=\"empty-icon\"\n\t\t\tclassName={cx(\"mb-1 size-10 text-neutral-400\", className)}\n\t\t\tsvg={svg}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nIcon.displayName = \"EmptyIcon\";\n\n/**\n * The heading text for the empty state. Renders as an `h3` by default. Use the\n * `asChild` prop to render as a different heading level (e.g. `h1`, `h2`).\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n *   <Empty.Icon svg={<GhostIcon />} />\n *   <Empty.Title>No endpoints yet</Empty.Title>\n *   <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n *   <Empty.Actions>\n *     <Button>Create endpoint</Button>\n *   </Empty.Actions>\n * </Empty.Root>\n *\n * <Empty.Title asChild>\n *   <h2>No results found</h2>\n * </Empty.Title>\n * ```\n */\nconst Title = ({\n\tasChild,\n\tchildren,\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLHeadingElement> & WithAsChild) => {\n\tconst Comp = asChild ? Slot : \"h3\";\n\n\treturn (\n\t\t<Comp\n\t\t\tdata-slot=\"empty-title\"\n\t\t\tclassName={cx(\"text-strong text-sm font-medium font-sans\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Comp>\n\t);\n};\nTitle.displayName = \"EmptyTitle\";\n\n/**\n * Supporting descriptive text below the title. Renders as a `div` with\n * `space-y-4` so multiple paragraphs can be placed inside. Use the `asChild`\n * prop to render as a different element.\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n *   <Empty.Icon svg={<GhostIcon />} />\n *   <Empty.Title>No endpoints yet</Empty.Title>\n *   <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n *   <Empty.Actions>\n *     <Button>Create endpoint</Button>\n *   </Empty.Actions>\n * </Empty.Root>\n *\n * <Empty.Description>\n *   <p>Something went wrong.</p>\n *   <p>Please try again in a few minutes.</p>\n * </Empty.Description>\n * ```\n */\nconst Description = ({\n\tasChild,\n\tchildren,\n\tclassName,\n\t...props\n}: ComponentProps<\"div\"> & WithAsChild) => {\n\tconst Comp = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Comp\n\t\t\tdata-slot=\"empty-description\"\n\t\t\tclassName={cx(\"text-muted space-y-4 text-sm font-sans\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Comp>\n\t);\n};\nDescription.displayName = \"EmptyDescription\";\n\n/**\n * A container for action buttons or links in the empty state.\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * ```tsx\n * <Empty.Root>\n *   <Empty.Icon svg={<GhostIcon />} />\n *   <Empty.Title>No endpoints yet</Empty.Title>\n *   <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n *   <Empty.Actions>\n *     <Button>Create endpoint</Button>\n *     <Button appearance=\"outlined\">Go back</Button>\n *   </Empty.Actions>\n * </Empty.Root>\n * ```\n */\nconst Actions = ({\n\tasChild,\n\tchildren,\n\tclassName,\n\t...props\n}: ComponentProps<\"div\"> & WithAsChild) => {\n\tconst Comp = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Comp\n\t\t\tdata-slot=\"empty-actions\"\n\t\t\tclassName={cx(\"mt-4 flex items-center gap-2\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Comp>\n\t);\n};\nActions.displayName = \"EmptyActions\";\n\n/**\n * Compound component for rendering empty states. Use with `Empty.Root`,\n * `Empty.Icon`, `Empty.Title`, `Empty.Description`, and `Empty.Actions`.\n *\n * @see https://mantle.ngrok.com/components/empty\n *\n * @example\n * Composition:\n * ```\n * Empty.Root\n * ├── Empty.Icon\n * ├── Empty.Title\n * ├── Empty.Description\n * └── Empty.Actions\n * ```\n *\n * @example\n * ```tsx\n * <Empty.Root>\n *   <Empty.Icon svg={<GhostIcon />} />\n *   <Empty.Title>No endpoints yet</Empty.Title>\n *   <Empty.Description>\n *     Create your first endpoint to get started.\n *   </Empty.Description>\n *   <Empty.Actions>\n *     <Button>Create endpoint</Button>\n *   </Empty.Actions>\n * </Empty.Root>\n * ```\n */\nconst Empty = {\n\t/**\n\t * The root container for an empty state. Centers content vertically and\n\t * horizontally with consistent padding and max-width.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t *   <Empty.Icon svg={<GhostIcon />} />\n\t *   <Empty.Title>No endpoints yet</Empty.Title>\n\t *   <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t *   <Empty.Actions>\n\t *     <Button>Create endpoint</Button>\n\t *   </Empty.Actions>\n\t * </Empty.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Renders a large icon for the empty state. Pass a single SVG icon element\n\t * via the `svg` prop.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t *   <Empty.Icon svg={<GhostIcon />} />\n\t *   <Empty.Title>No endpoints yet</Empty.Title>\n\t *   <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t *   <Empty.Actions>\n\t *     <Button>Create endpoint</Button>\n\t *   </Empty.Actions>\n\t * </Empty.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The heading text for the empty state. Renders as an `h3` by default.\n\t * Use `asChild` to render as a different heading level.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t *   <Empty.Icon svg={<GhostIcon />} />\n\t *   <Empty.Title>No endpoints yet</Empty.Title>\n\t *   <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t *   <Empty.Actions>\n\t *     <Button>Create endpoint</Button>\n\t *   </Empty.Actions>\n\t * </Empty.Root>\n\t *\n\t * <Empty.Title asChild>\n\t *   <h2>No results found</h2>\n\t * </Empty.Title>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * Supporting descriptive text below the title. Renders as a `div` with\n\t * `space-y-4` for multiple paragraphs. Use `asChild` to render as a\n\t * different element.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t *   <Empty.Icon svg={<GhostIcon />} />\n\t *   <Empty.Title>No endpoints yet</Empty.Title>\n\t *   <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t *   <Empty.Actions>\n\t *     <Button>Create endpoint</Button>\n\t *   </Empty.Actions>\n\t * </Empty.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * A container for action buttons or links in the empty state.\n\t *\n\t * @see https://mantle.ngrok.com/components/empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Empty.Root>\n\t *   <Empty.Icon svg={<GhostIcon />} />\n\t *   <Empty.Title>No endpoints yet</Empty.Title>\n\t *   <Empty.Description>Create your first endpoint to get started.</Empty.Description>\n\t *   <Empty.Actions>\n\t *     <Button>Create endpoint</Button>\n\t *   </Empty.Actions>\n\t * </Empty.Root>\n\t * ```\n\t */\n\tActions,\n} as const;\n\nexport {\n\t//,\n\tEmpty,\n};\n"],"mappings":"0JAyBA,MAAM,GAAQ,CAAE,UAAS,WAAU,YAAW,GAAG,KAI/C,EAHY,EAAU,EAAO,MAG7B,CACC,YAAU,QACV,UAAW,EAAG,8DAA+D,CAAS,EACtF,GAAI,EAEH,UACI,CAAA,EAGR,EAAK,YAAc,QA2BnB,MAAM,GAAQ,CAAE,YAAW,MAAK,GAAG,KAEjC,EAAC,EAAD,CACC,YAAU,aACV,UAAW,EAAG,gCAAiC,CAAS,EACnD,MACL,GAAI,CACJ,CAAA,EAGH,EAAK,YAAc,YAwBnB,MAAM,GAAS,CACd,UACA,WACA,YACA,GAAG,KAKF,EAHY,EAAU,EAAO,KAG7B,CACC,YAAU,cACV,UAAW,EAAG,4CAA6C,CAAS,EACpE,GAAI,EAEH,UACI,CAAA,EAGR,EAAM,YAAc,aA0BpB,MAAM,GAAe,CACpB,UACA,WACA,YACA,GAAG,KAKF,EAHY,EAAU,EAAO,MAG7B,CACC,YAAU,oBACV,UAAW,EAAG,yCAA0C,CAAS,EACjE,GAAI,EAEH,UACI,CAAA,EAGR,EAAY,YAAc,mBAoB1B,MAAM,GAAW,CAChB,UACA,WACA,YACA,GAAG,KAKF,EAHY,EAAU,EAAO,MAG7B,CACC,YAAU,gBACV,UAAW,EAAG,+BAAgC,CAAS,EACvD,GAAI,EAEH,UACI,CAAA,EAGR,EAAQ,YAAc,eAgCtB,MAAM,EAAQ,CAmBb,OAmBA,OAuBA,QAoBA,cAkBA,SACD"}

package/dist/field.d.ts

@@ -1,5 +1,5 @@
 import { t as WithAsChild } from "./as-child-uN_018tj.js";
-import { n as IconButtonProps } from "./icon-button-Ct3A7aoj.js";
+import { n as IconButtonProps } from "./icon-button-ntupABbM.js";
 import { a as ValidationState, c as parseValidation, i as ValidationProp, l as resolveValidation, n as ParsedValidation, o as WithValidation, r as Validation, s as isAriaInvalid, t as AriaInvalid } from "./validation-xyX_6kph.js";
 import { t as Slot } from "./index-BL5WVva_.js";
 import { ComponentProps, ReactElement, ReactNode } from "react";

package/dist/{icon-button-Ct3A7aoj.d.ts → icon-button-ntupABbM.d.ts}

@@ -6,7 +6,7 @@ import { ButtonHTMLAttributes, ReactNode } from "react";
 declare const iconButtonVariants: (props?: ({
   appearance?: "ghost" | "outlined" | null | undefined;
   isLoading?: boolean | null | undefined;
-  size?: "md" | "xs" | "sm" | null | undefined;
+  size?: "xs" | "sm" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type IconButtonVariants = VariantProps<typeof iconButtonVariants>;
 /**
@@ -93,4 +93,4 @@ type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & I
 declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { IconButtonProps as n, IconButton as t };
-//# sourceMappingURL=icon-button-Ct3A7aoj.d.ts.map
+//# sourceMappingURL=icon-button-ntupABbM.d.ts.map

package/dist/llms.txt

@@ -1,4 +1,4 @@
-# @ngrok/mantle (0.76.1)
+# @ngrok/mantle (0.76.2)
 
 > Offline discovery hint shipped inside the @ngrok/mantle npm package. Authoritative metadata lives at https://mantle.ngrok.com/for-ai-agents.
 

package/dist/sheet.d.ts

@@ -1,5 +1,5 @@
 import { t as Root } from "./primitive-FoWela9a.js";
-import { n as IconButtonProps } from "./icon-button-Ct3A7aoj.js";
+import { n as IconButtonProps } from "./icon-button-ntupABbM.js";
 import { HTMLAttributes } from "react";
 import { VariantProps } from "class-variance-authority";
 

package/dist/split-button.d.ts

@@ -1,4 +1,4 @@
-import { t as IconButton } from "./icon-button-Ct3A7aoj.js";
+import { t as IconButton } from "./icon-button-ntupABbM.js";
 import { t as Button } from "./button-BYZOBUgj.js";
 import { t as DropdownMenu } from "./dropdown-menu-BqdyTFLu.js";
 import { ComponentProps, ReactNode } from "react";

package/dist/well.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-CBSnSC36.js";import{t}from"./slot-CV5fmqFr.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n=!1,className:i,...a},o)=>r(n?t:`div`,{ref:o,"data-slot":`well`,className:e(`border-card bg-base relative rounded-md border shadow-inner`,i),...a}));i.displayName=`Well`;export{i as Well};
+import{t as e}from"./cx-CBSnSC36.js";import{t}from"./slot-CV5fmqFr.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n=!1,className:i,...a},o)=>r(n?t:`div`,{ref:o,"data-slot":`well`,className:e(`border-card-muted bg-base relative rounded-md border shadow-inner`,i),...a}));i.displayName=`Well`;export{i as Well};
 //# sourceMappingURL=well.js.map

package/dist/well.js.map

@@ -1 +1 @@
-{"version":3,"file":"well.js","names":[],"sources":["../src/components/well/well.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype WellProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * A recessed, inset container used to visually group and de-emphasize content\n * relative to the surrounding surface, such as code samples, supplementary\n * notes, or read-only summaries.\n *\n * Renders a `<div>` by default. Pass `asChild` to render as a different element\n * or your own component, forwarding all class names, `data-*` attributes, and\n * the ref onto that child.\n *\n * @see https://mantle.ngrok.com/components/well\n *\n * @example\n * ```tsx\n * <Well>\n *   <p>Eu ad sint laborum nostrud ullamco esse.</p>\n * </Well>\n * ```\n *\n * @example\n * ```tsx\n * <Well asChild>\n *   <section aria-label=\"Summary\">…</section>\n * </Well>\n * ```\n */\nconst Well = forwardRef<ComponentRef<\"div\">, WellProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"well\"\n\t\t\t\tclassName={cx(\"border-card bg-base relative rounded-md border shadow-inner\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nWell.displayName = \"Well\";\n\nexport {\n\t//,\n\tWell,\n};\n"],"mappings":"kJAiCA,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,GAAG,GAAS,IAIzC,EAHY,EAAU,EAAO,MAG7B,CACM,MACL,YAAU,OACV,UAAW,EAAG,8DAA+D,CAAS,EACtF,GAAI,CACJ,CAAA,CAGJ,EACA,EAAK,YAAc"}
+{"version":3,"file":"well.js","names":[],"sources":["../src/components/well/well.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype WellProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * A recessed, inset container used to visually group and de-emphasize content\n * relative to the surrounding surface, such as code samples, supplementary\n * notes, or read-only summaries.\n *\n * Renders a `<div>` by default. Pass `asChild` to render as a different element\n * or your own component, forwarding all class names, `data-*` attributes, and\n * the ref onto that child.\n *\n * @see https://mantle.ngrok.com/components/well\n *\n * @example\n * ```tsx\n * <Well>\n *   <p>Eu ad sint laborum nostrud ullamco esse.</p>\n * </Well>\n * ```\n *\n * @example\n * ```tsx\n * <Well asChild>\n *   <section aria-label=\"Summary\">…</section>\n * </Well>\n * ```\n */\nconst Well = forwardRef<ComponentRef<\"div\">, WellProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"well\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-card-muted bg-base relative rounded-md border shadow-inner\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nWell.displayName = \"Well\";\n\nexport {\n\t//,\n\tWell,\n};\n"],"mappings":"kJAiCA,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,GAAG,GAAS,IAIzC,EAHY,EAAU,EAAO,MAG7B,CACM,MACL,YAAU,OACV,UAAW,EACV,oEACA,CACD,EACA,GAAI,CACJ,CAAA,CAGJ,EACA,EAAK,YAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngrok/mantle",
-  "version": "0.76.1",
+  "version": "0.76.2",
   "description": "mantle is ngrok's UI library and design system.",
   "homepage": "https://mantle.ngrok.com",
   "license": "MIT",