@ngrok/mantle 0.68.7 → 0.69.0

package/README.md

@@ -48,8 +48,6 @@ Mantle ships runtime components from `@ngrok/mantle`, while build-time and serve
 
 This keeps Vite/Shiki/parser dependencies out of frontend installs that only need Mantle's runtime UI package.
 
-For a concrete service implementation, see [`apps/highlight-server`](../../apps/highlight-server/README.md), a Bun + Hono syntax-highlighting API that preloads Shiki and serves highlighted HTML for server-side use cases.
-
 ### Vite + MDX
 
 ```ts
@@ -70,6 +68,16 @@ const result = await highlighter.highlight({
 });
 ```
 
+## Scaffolding a New Component
+
+If you're contributing a new mantle component and use [Claude Code](https://claude.com/claude-code), run the `/scaffold-component` slash command to scaffold one end-to-end (component files, package.json export, docs page, route, navigation entry, and changeset):
+
+```
+/scaffold-component <component-name>
+```
+
+See [`.claude/commands/scaffold-component.md`](https://github.com/ngrok-oss/mantle/blob/main/.claude/commands/scaffold-component.md) for the full step-by-step reference — it's also useful if you'd rather scaffold by hand.
+
 ## Git Hooks
 
 Pre-commit hooks run automatically via [husky](https://typicode.github.io/husky/) and [lint-staged](https://github.com/lint-staged/lint-staged). On every commit, staged files are formatted with oxfmt and linted with oxlint.

package/dist/alert-dialog.d.ts

@@ -149,7 +149,7 @@ declare const AlertDialog: {
   readonly Action: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
     appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
-    priority?: "danger" | "neutral" | "default" | null | undefined;
+    priority?: "default" | "danger" | "neutral" | null | undefined;
   } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";
@@ -159,7 +159,7 @@ declare const AlertDialog: {
   }, "ref"> | Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
     appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
-    priority?: "danger" | "neutral" | "default" | null | undefined;
+    priority?: "default" | "danger" | "neutral" | null | undefined;
   } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";
@@ -206,7 +206,7 @@ declare const AlertDialog: {
   readonly Cancel: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
     appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
-    priority?: "danger" | "neutral" | "default" | null | undefined;
+    priority?: "default" | "danger" | "neutral" | null | undefined;
   } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";
@@ -216,7 +216,7 @@ declare const AlertDialog: {
   }, "ref"> | Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
     appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
-    priority?: "danger" | "neutral" | "default" | null | undefined;
+    priority?: "default" | "danger" | "neutral" | null | undefined;
   } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";

package/dist/{button-CX98GGHD.d.ts → button-BaNwe1ud.d.ts}

@@ -9,7 +9,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 declare const buttonVariants: (props?: ({
   appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
   isLoading?: boolean | null | undefined;
-  priority?: "danger" | "neutral" | "default" | null | undefined;
+  priority?: "default" | "danger" | "neutral" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type ButtonVariants = VariantProps$1<typeof buttonVariants>;
 /**
@@ -93,7 +93,7 @@ type ButtonProps = ComponentProps<"button"> & ButtonVariants & {
 declare const Button: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
   appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
   isLoading?: boolean | null | undefined;
-  priority?: "danger" | "neutral" | "default" | null | undefined;
+  priority?: "default" | "danger" | "neutral" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
   /**
    * An icon to render inside the button. If the `state` is `"pending"`, then
@@ -139,7 +139,7 @@ declare const Button: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttri
 }, "ref"> | Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
   appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
   isLoading?: boolean | null | undefined;
-  priority?: "danger" | "neutral" | "default" | null | undefined;
+  priority?: "default" | "danger" | "neutral" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
   /**
    * An icon to render inside the button. If the `state` is `"pending"`, then
@@ -172,4 +172,4 @@ declare const Button: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttri
 }, "ref">) & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { ButtonProps as n, Button as t };
-//# sourceMappingURL=button-CX98GGHD.d.ts.map
+//# sourceMappingURL=button-BaNwe1ud.d.ts.map

package/dist/button.d.ts

@@ -1,4 +1,4 @@
 import { n as IconButtonProps, t as IconButton } from "./icon-button-gO-7F_MZ.js";
-import { n as ButtonProps, t as Button } from "./button-CX98GGHD.js";
-import { n as ButtonGroupProps, t as ButtonGroup } from "./index-Cj2NX2Dg.js";
+import { n as ButtonProps, t as Button } from "./button-BaNwe1ud.js";
+import { n as ButtonGroupProps, t as ButtonGroup } from "./index-BCZ3y0yi.js";
 export { Button, ButtonGroup, ButtonGroupProps, ButtonProps, IconButton, IconButtonProps };

package/dist/checkbox.d.ts

@@ -19,7 +19,7 @@ type CheckedState = boolean | "indeterminate";
  * </form>
  * ```
  */
-declare const Checkbox: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | "defaultChecked" | "checked"> & WithValidation & {
+declare const Checkbox: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "checked" | "type" | "defaultChecked"> & WithValidation & {
   /**
    * The controlled checked state of the checkbox. Must be used in conjunction with onChange.
    */

package/dist/command.d.ts

@@ -178,7 +178,7 @@ declare const Command: {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof _$react.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
+  }, "key" | keyof _$react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "type" | "value" | "onChange"> & {
     value?: string;
     onValueChange?: (search: string) => void;
   } & _$react.RefAttributes<HTMLInputElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
@@ -239,7 +239,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -262,7 +262,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild">, "disabled" | "onSelect" | "value"> & {
+  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild">, "disabled" | "value" | "onSelect"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/data-table.d.ts

@@ -1,4 +1,4 @@
-import { t as Button } from "./button-CX98GGHD.js";
+import { t as Button } from "./button-BaNwe1ud.js";
 import { s as SortingMode } from "./direction-MVSxfKWx.js";
 import { t as Table$1 } from "./table-C7BejaFW.js";
 import * as _$react from "react";

package/dist/empty.d.ts

@@ -0,0 +1,149 @@
+import { t as SvgAttributes } from "./types-yU-Byhue.js";
+import { t as WithAsChild } from "./as-child-CRRsxi3Y.js";
+import { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/empty/empty.d.ts
+type EmptyIconProps = Omit<SvgAttributes, "children"> & {
+  /**
+   * A single SVG icon element.
+   */
+  svg: ReactNode;
+};
+/**
+ * Compound component for rendering empty states. Use with `Empty.Root`,
+ * `Empty.Icon`, `Empty.Title`, `Empty.Description`, and `Empty.Actions`.
+ *
+ * @see https://mantle.ngrok.com/components/empty
+ *
+ * @example
+ * ```tsx
+ * <Empty.Root>
+ *   <Empty.Icon svg={<GhostIcon />} />
+ *   <Empty.Title>No endpoints yet</Empty.Title>
+ *   <Empty.Description>
+ *     Create your first endpoint to get started.
+ *   </Empty.Description>
+ *   <Empty.Actions>
+ *     <Button>Create endpoint</Button>
+ *   </Empty.Actions>
+ * </Empty.Root>
+ * ```
+ */
+declare const Empty: {
+  /**
+   * The root container for an empty state. Centers content vertically and
+   * horizontally with consistent padding and max-width.
+   *
+   * @see https://mantle.ngrok.com/components/empty
+   *
+   * @example
+   * ```tsx
+   * <Empty.Root>
+   *   <Empty.Icon svg={<GhostIcon />} />
+   *   <Empty.Title>No endpoints yet</Empty.Title>
+   *   <Empty.Description>Create your first endpoint to get started.</Empty.Description>
+   *   <Empty.Actions>
+   *     <Button>Create endpoint</Button>
+   *   </Empty.Actions>
+   * </Empty.Root>
+   * ```
+   */
+  readonly Root: {
+    ({
+      children,
+      className,
+      ...props
+    }: ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+    displayName: string;
+  };
+  /**
+   * Renders a large icon for the empty state. Pass a single SVG icon element
+   * via the `svg` prop.
+   *
+   * @see https://mantle.ngrok.com/components/empty
+   *
+   * @example
+   * ```tsx
+   * <Empty.Icon svg={<GhostIcon />} />
+   * ```
+   */
+  readonly Icon: {
+    ({
+      className,
+      svg,
+      ...props
+    }: EmptyIconProps): _$react_jsx_runtime0.JSX.Element;
+    displayName: string;
+  };
+  /**
+   * The heading text for the empty state. Renders as an `h3` by default.
+   * Use `asChild` to render as a different heading level.
+   *
+   * @see https://mantle.ngrok.com/components/empty
+   *
+   * @example
+   * ```tsx
+   * <Empty.Title>No results found</Empty.Title>
+   *
+   * <Empty.Title asChild>
+   *   <h2>No results found</h2>
+   * </Empty.Title>
+   * ```
+   */
+  readonly Title: {
+    ({
+      asChild,
+      children,
+      className,
+      ...props
+    }: HTMLAttributes<HTMLHeadingElement> & WithAsChild): _$react_jsx_runtime0.JSX.Element;
+    displayName: string;
+  };
+  /**
+   * Supporting descriptive text below the title. Renders as a `div` with
+   * `space-y-4` for multiple paragraphs. Use `asChild` to render as a
+   * different element.
+   *
+   * @see https://mantle.ngrok.com/components/empty
+   *
+   * @example
+   * ```tsx
+   * <Empty.Description>
+   *   <p>Please try again in a few minutes.</p>
+   * </Empty.Description>
+   * ```
+   */
+  readonly Description: {
+    ({
+      asChild,
+      children,
+      className,
+      ...props
+    }: ComponentProps<"div"> & WithAsChild): _$react_jsx_runtime0.JSX.Element;
+    displayName: string;
+  };
+  /**
+   * A container for action buttons or links in the empty state.
+   *
+   * @see https://mantle.ngrok.com/components/empty
+   *
+   * @example
+   * ```tsx
+   * <Empty.Actions>
+   *   <Button>Clear filters</Button>
+   * </Empty.Actions>
+   * ```
+   */
+  readonly Actions: {
+    ({
+      children,
+      className,
+      ...props
+    }: ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion
+export { Empty };
+//# sourceMappingURL=empty.d.ts.map

package/dist/empty.js

@@ -0,0 +1,2 @@
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./svg-only-DnZldAY9.js";import{t as n}from"./slot-D_ZUrdEW.js";import{jsx as r}from"react/jsx-runtime";const i=({children:t,className:n,...i})=>r(`div`,{className:e(`mx-auto flex max-w-lg flex-col items-center py-14 text-center`,n),...i,children:t});i.displayName=`Empty`;const a=({className:n,svg:i,...a})=>r(t,{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`,{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`,{className:e(`text-body mt-1 space-y-4 text-sm`,a),...o,children:i});s.displayName=`EmptyDescription`;const c=({children:t,className:n,...i})=>r(`div`,{className:e(`mt-4 flex items-center gap-2`,n),...i,children:t});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

@@ -0,0 +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 = ({ children, className, ...props }: ComponentProps<\"div\">) => {\n\treturn (\n\t\t<div\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</div>\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.Icon svg={<GhostIcon />} />\n * ```\n */\nconst Icon = ({ className, svg, ...props }: EmptyIconProps) => {\n\treturn <SvgOnly className={cx(\"mb-2 size-16 text-muted\", className)} svg={svg} {...props} />;\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.Title>No results found</Empty.Title>\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 className={cx(\"text-strong text-xl font-medium\", className)} {...props}>\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.Description>\n *   <p>Try adjusting your search or filters.</p>\n * </Empty.Description>\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 className={cx(\"text-body mt-1 space-y-4 text-sm\", className)} {...props}>\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.Actions>\n *   <Button>Clear filters</Button>\n *   <Button appearance=\"outlined\">Go back</Button>\n * </Empty.Actions>\n * ```\n */\nconst Actions = ({ children, className, ...props }: ComponentProps<\"div\">) => {\n\treturn (\n\t\t<div className={cx(\"mt-4 flex items-center gap-2\", className)} {...props}>\n\t\t\t{children}\n\t\t</div>\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 * ```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.Icon svg={<GhostIcon />} />\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.Title>No results found</Empty.Title>\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.Description>\n\t *   <p>Please try again in a few minutes.</p>\n\t * </Empty.Description>\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.Actions>\n\t *   <Button>Clear filters</Button>\n\t * </Empty.Actions>\n\t * ```\n\t */\n\tActions,\n} as const;\n\nexport {\n\t//,\n\tEmpty,\n};\n"],"mappings":"0JAyBA,MAAM,GAAQ,CAAE,WAAU,YAAW,GAAG,KAEtC,EAAC,MAAD,CACC,UAAW,EAAG,gEAAiE,EAAU,CACzF,GAAI,EAEH,WACI,CAAA,CAGR,EAAK,YAAc,QAoBnB,MAAM,GAAQ,CAAE,YAAW,MAAK,GAAG,KAC3B,EAAC,EAAD,CAAS,UAAW,EAAG,0BAA2B,EAAU,CAAO,MAAK,GAAI,EAAS,CAAA,CAE7F,EAAK,YAAc,YAiBnB,MAAM,GAAS,CACd,UACA,WACA,YACA,GAAG,KAKF,EAHY,EAAU,EAAO,KAG7B,CAAM,UAAW,EAAG,kCAAmC,EAAU,CAAE,GAAI,EACrE,WACK,CAAA,CAGT,EAAM,YAAc,aAqBpB,MAAM,GAAe,CACpB,UACA,WACA,YACA,GAAG,KAKF,EAHY,EAAU,EAAO,MAG7B,CAAM,UAAW,EAAG,mCAAoC,EAAU,CAAE,GAAI,EACtE,WACK,CAAA,CAGT,EAAY,YAAc,mBAe1B,MAAM,GAAW,CAAE,WAAU,YAAW,GAAG,KAEzC,EAAC,MAAD,CAAK,UAAW,EAAG,+BAAgC,EAAU,CAAE,GAAI,EACjE,WACI,CAAA,CAGR,EAAQ,YAAc,eAsBtB,MAAM,EAAQ,CAmBb,OAYA,OAgBA,QAeA,cAaA,UACA"}

package/dist/hooks.d.ts

@@ -1,5 +1,5 @@
 import { n as MarginType, o as useComposedRefs } from "./in-view-DS0PgFGa.js";
-import { RefObject, useLayoutEffect } from "react";
+import { RefObject, useEffect } from "react";
 
 //#region src/hooks/use-breakpoint.d.ts
 /**
@@ -177,7 +177,7 @@ declare function useIsHydrated(): boolean;
 /**
  * useIsomorphicLayoutEffect is a hook that uses useLayoutEffect on the client and useEffect on the server.
  */
-declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+declare const useIsomorphicLayoutEffect: typeof useEffect;
 //#endregion
 //#region src/hooks/use-matches-media-query.d.ts
 /**

package/dist/{index-Cj2NX2Dg.d.ts → index-BCZ3y0yi.d.ts}

@@ -5,7 +5,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/button/button-group.d.ts
 declare const buttonGroupVariants: (props?: ({
-  appearance?: "ghost" | "outlined" | "panel" | null | undefined;
+  appearance?: "panel" | "ghost" | "outlined" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>;
 type ButtonGroupProps = ComponentProps<"div"> & ButtonGroupVariants;
@@ -26,4 +26,4 @@ type ButtonGroupProps = ComponentProps<"div"> & ButtonGroupVariants;
 declare const ButtonGroup: _$react.ForwardRefExoticComponent<Omit<ButtonGroupProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { ButtonGroupProps as n, ButtonGroup as t };
-//# sourceMappingURL=index-Cj2NX2Dg.d.ts.map
+//# sourceMappingURL=index-BCZ3y0yi.d.ts.map

package/dist/{index-Bw97R9Kw.d.ts → index-DXuVn00J.d.ts}

@@ -23,7 +23,7 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "
  * />
  * ```
  */
-declare const Input: _$react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & WithAutoComplete & WithInputType & WithValidation & {
+declare const Input: _$react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithAutoComplete & WithInputType & WithValidation & {
   children?: _$react.ReactNode | undefined;
 } & _$react.RefAttributes<HTMLInputElement>>;
 type InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & BaseProps;
@@ -41,7 +41,7 @@ type InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComple
  * </Input>
  * ```
  */
-declare const InputCapture: _$react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & WithAutoComplete & WithInputType & WithValidation & _$react.RefAttributes<HTMLInputElement>>;
+declare const InputCapture: _$react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithAutoComplete & WithInputType & WithValidation & _$react.RefAttributes<HTMLInputElement>>;
 //#endregion
 //#region src/components/input/password-input.d.ts
 type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
@@ -70,7 +70,7 @@ type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoCompl
  * />
  * ```
  */
-declare const PasswordInput: _$react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & WithValidation & WithAutoComplete & {
+declare const PasswordInput: _$react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
   /**
    * Callback for when the visibility of the password value changes.
    */
@@ -100,4 +100,4 @@ declare const PasswordInput: _$react.ForwardRefExoticComponent<Omit<InputHTMLAtt
 declare function isInput(value: unknown): value is HTMLInputElement;
 //#endregion
 export { InputCapture as a, Input as i, PasswordInput as n, InputCaptureProps as o, PasswordInputProps as r, InputProps as s, isInput as t };
-//# sourceMappingURL=index-Bw97R9Kw.d.ts.map
+//# sourceMappingURL=index-DXuVn00J.d.ts.map

package/dist/input.d.ts

@@ -1,3 +1,3 @@
 import { a as WithInputType, i as WithAutoComplete, n as InputType, o as WithValidation, r as Validation, t as AutoComplete } from "./types-Cq6RWU7Q.js";
-import { a as InputCapture, i as Input, n as PasswordInput, o as InputCaptureProps, r as PasswordInputProps, s as InputProps, t as isInput } from "./index-Bw97R9Kw.js";
+import { a as InputCapture, i as Input, n as PasswordInput, o as InputCaptureProps, r as PasswordInputProps, s as InputProps, t as isInput } from "./index-DXuVn00J.js";
 export { AutoComplete, Input, InputCapture, InputCaptureProps, InputProps, InputType, PasswordInput, PasswordInputProps, Validation, WithAutoComplete, WithInputType, WithValidation, isInput };

package/dist/pagination.d.ts

@@ -1,5 +1,5 @@
 import { t as WithAsChild } from "./as-child-CRRsxi3Y.js";
-import { t as ButtonGroup } from "./index-Cj2NX2Dg.js";
+import { t as ButtonGroup } from "./index-BCZ3y0yi.js";
 import { t as Select } from "./select-DJmjfGjt.js";
 import * as _$react from "react";
 import { ComponentProps } from "react";

package/dist/split-button.d.ts

@@ -1,5 +1,5 @@
 import { t as IconButton } from "./icon-button-gO-7F_MZ.js";
-import { t as Button } from "./button-CX98GGHD.js";
+import { t as Button } from "./button-BaNwe1ud.js";
 import { t as DropdownMenu } from "./dropdown-menu-D6MiVSR-.js";
 import * as _$react from "react";
 import { ComponentProps, ReactNode } from "react";

package/dist/theme.d.ts

@@ -203,7 +203,7 @@ declare function useTheme(): ThemeProviderState;
  */
 declare function readThemeFromHtmlElement(): {
   appliedTheme: "dark" | "light" | "light-high-contrast" | "dark-high-contrast" | undefined;
-  theme: "dark" | "light" | "system" | "light-high-contrast" | "dark-high-contrast" | undefined;
+  theme: "dark" | "light" | "light-high-contrast" | "dark-high-contrast" | "system" | undefined;
 };
 /**
  * If the theme is "system", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngrok/mantle",
-  "version": "0.68.7",
+  "version": "0.69.0",
   "description": "mantle is ngrok's UI library and design system.",
   "homepage": "https://mantle.ngrok.com",
   "license": "MIT",
@@ -154,6 +154,11 @@
       "types": "./dist/dropdown-menu.d.ts",
       "import": "./dist/dropdown-menu.js"
     },
+    "./empty": {
+      "@ngrok/src-live-types": "./src/components/empty/index.ts",
+      "types": "./dist/empty.d.ts",
+      "import": "./dist/empty.js"
+    },
     "./flag": {
       "@ngrok/src-live-types": "./src/components/flag/index.ts",
       "types": "./dist/flag.d.ts",