@ngrok/mantle 0.77.0 → 0.78.0

package/dist/hover-card.d.ts

@@ -1,7 +1,34 @@
 import { ComponentPropsWithoutRef } from "react";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-
 //#region src/components/hover-card/hover-card.d.ts
+/**
+ * A floating card that appears when a user hovers over a trigger element.
+ * This is the root, stateful component that manages the open/closed state of the hover card.
+ *
+ * `HoverCard.Content` renders at Tailwind `z-50`, Mantle's shared floating
+ * z-index. When multiple shared layers are open, the most recently mounted
+ * layer renders on top.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/hover-card#hovercardroot
+ *
+ * @example
+ * ```tsx
+ * <HoverCard.Root>
+ *   <HoverCard.Trigger asChild>
+ *     <Button type="button" appearance="outlined">
+ *       Hover me
+ *     </Button>
+ *   </HoverCard.Trigger>
+ *   <HoverCard.Content>
+ *     <p>This is the hover card content.</p>
+ *   </HoverCard.Content>
+ * </HoverCard.Root>
+ * ```
+ */
+declare const Root: {
+  ({ closeDelay, openDelay, ...props }: ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>): import("react").JSX.Element;
+  displayName: string;
+};
 /**
  * A floating card that appears when a user hovers over a trigger element.
  *
@@ -17,7 +44,7 @@ import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
  * z-index. When multiple shared layers are open, the most recently mounted
  * layer renders on top.
  *
- * @see https://mantle.ngrok.com/components/hover-card
+ * @see https://mantle.ngrok.com/components/overlays/hover-card
  *
  * @example
  * Composition:
@@ -49,7 +76,7 @@ declare const HoverCard: {
    * z-index. When multiple shared layers are open, the most recently mounted
    * layer renders on top.
    *
-   * @see https://mantle.ngrok.com/components/hover-card#hovercardroot
+   * @see https://mantle.ngrok.com/components/overlays/hover-card#hovercardroot
    *
    * @example
    * ```tsx
@@ -63,14 +90,7 @@ declare const HoverCard: {
    * </HoverCard.Root>
    * ```
    */
-  readonly Root: {
-    ({
-      closeDelay,
-      openDelay,
-      ...props
-    }: ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>): import("react").JSX.Element;
-    displayName: string;
-  };
+  readonly Root: typeof Root;
   /**
    * The content to render inside the hover card. Appears in a portal with rich styling and animations.
    *
@@ -78,7 +98,7 @@ declare const HoverCard: {
    * z-index. When multiple shared layers are open, the most recently mounted
    * layer renders on top.
    *
-   * @see https://mantle.ngrok.com/components/hover-card#hovercardcontent
+   * @see https://mantle.ngrok.com/components/overlays/hover-card#hovercardcontent
    *
    * @example
    * ```tsx
@@ -103,7 +123,7 @@ declare const HoverCard: {
    * do not need to use `HoverCard.Portal` directly. Use it only when you need to
    * customize portal placement or wrap multiple `HoverCard.Content` instances.
    *
-   * @see https://mantle.ngrok.com/components/hover-card#hovercardportal
+   * @see https://mantle.ngrok.com/components/overlays/hover-card#hovercardportal
    *
    * @example
    * ```tsx
@@ -125,7 +145,7 @@ declare const HoverCard: {
   /**
    * The trigger element that opens the hover card when hovered.
    *
-   * @see https://mantle.ngrok.com/components/hover-card#hovercardtrigger
+   * @see https://mantle.ngrok.com/components/overlays/hover-card#hovercardtrigger
    *
    * @example
    * ```tsx

package/dist/hover-card.js

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";import*as r from"@radix-ui/react-hover-card";const i=({closeDelay:e=300,openDelay:t=100,...i})=>n(r.Root,{closeDelay:e,openDelay:t,...i});i.displayName=`HoverCard`;const a=t((e,t)=>n(r.Trigger,{ref:t,"data-slot":`hover-card-trigger`,...e}));a.displayName=`HoverCardTrigger`;const o=r.Portal;o.displayName=`HoverCardPortal`;const s=t(({className:t,onClick:i,align:a=`center`,sideOffset:s=4,...c},l)=>n(o,{children:n(r.Content,{ref:l,"data-slot":`hover-card-content`,align:a,sideOffset:s,className:e(`bg-popover border-popover z-50 w-64 rounded-md border p-4 shadow-md outline-hidden`,`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2`,t),onClick:e=>{e.stopPropagation(),i?.(e)},...c})}));s.displayName=r.Content.displayName;const c={Root:i,Content:s,Portal:o,Trigger:a};export{c as HoverCard};
+import{t as e}from"./cx-IiQEAKf5.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";import*as r from"@radix-ui/react-hover-card";const i=({closeDelay:e=300,openDelay:t=100,...i})=>n(r.Root,{closeDelay:e,openDelay:t,...i});i.displayName=`HoverCard`;const a=t((e,t)=>n(r.Trigger,{ref:t,"data-slot":`hover-card-trigger`,...e}));a.displayName=`HoverCardTrigger`;const o=r.Portal;o.displayName=`HoverCardPortal`;const s=t(({className:t,onClick:i,align:a=`center`,sideOffset:s=4,...c},l)=>n(o,{children:n(r.Content,{ref:l,"data-slot":`hover-card-content`,align:a,sideOffset:s,className:e(`bg-popover border-popover z-50 w-64 rounded-md border p-4 shadow-md outline-hidden`,`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2`,t),onClick:e=>{e.stopPropagation(),i?.(e)},...c})}));s.displayName=r.Content.displayName;const c={Root:i,Content:s,Portal:o,Trigger:a};export{c as HoverCard};

package/dist/icon-CDtYjF_H.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./svg-only-DDx6FtJd.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({className:n,style:i,svg:a,...o},s)=>r(t,{ref:s,"data-slot":`icon`,className:e(`size-5`,n),style:i,svg:a,...o}));i.displayName=`Icon`;export{i as t};

package/dist/{icon-n49kOh4_.d.ts → icon-Cevjo93X.d.ts}

@@ -1,6 +1,5 @@
-import { t as SvgAttributes } from "./types-BvUzforF.js";
+import { t as SvgAttributes } from "./types-D1RY5Tcj.js";
 import { ReactNode } from "react";
-
 //#region src/components/icon/icon.d.ts
 type IconProps = Omit<SvgAttributes, "children"> & {
   /**
@@ -11,7 +10,7 @@ type IconProps = Omit<SvgAttributes, "children"> & {
 /**
  * Decorates an svg icon with automatic sizing styles and a `shrink-0` class.
  *
- * @see https://mantle.ngrok.com/components/icon
+ * @see https://mantle.ngrok.com/components/data-display/icon
  *
  * @example
  * ```tsx

package/dist/{icon-button-DiX9iZ9n.js → icon-button-CxVsZ2N1.js}

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./icon-SUx16Sl3.js";import{t as n}from"./slot-DT_E5BQx.js";import{t as r}from"./booleanish-BfvnW6vy.js";import{Children as i,cloneElement as a,forwardRef 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=e(`icon-button`,`inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border`,`focus:outline-hidden focus-visible:ring-4`,`disabled:cursor-default disabled:opacity-50`,`not-disabled:active:scale-97 ease-out transition-transform duration-150`),h=f(m,{variants:{appearance:{ghost:`text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong border-transparent`,outlined:`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 focus-visible:not-disabled:active:border-accent-600`},isLoading:{false:``,true:`opacity-50`},size:{xs:`size-6`,sm:`size-7`,md:`size-9`}},defaultVariants:{appearance:`outlined`,size:`md`}}),g=o(({"aria-disabled":o,appearance:f,asChild:m=!1,children:g,className:_,disabled:v,icon:y,isLoading:b=!1,label:x,size:S,type:C,...w},T)=>{let E=r(o??v??b),D=b?u(p,{className:`animate-spin`}):y,O={"aria-disabled":E,"data-slot":`icon-button`,className:e(h({appearance:f,isLoading:b,size:S}),_),"data-appearance":f,"data-disabled":E,"data-icon-button":!0,"data-loading":b,"data-size":S,disabled:E,ref:T,...w},k=d(l,{children:[u(`span`,{className:`sr-only`,children:x}),u(t,{svg:D})]});return m?(c(s(g)&&i.only(g),"When using `asChild`, IconButton must be passed a single child as a JSX tag."),u(n,{...O,children:a(g,{},k)})):u(`button`,{...O,type:C??`button`,children:k})});g.displayName=`IconButton`;export{m as n,h as r,g as t};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-CDtYjF_H.js";import{t as n}from"./slot-DmPrjM7N.js";import{t as r}from"./booleanish-BfvnW6vy.js";import{Children as i,cloneElement as a,forwardRef 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=e(`icon-button`,`inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border`,`focus:outline-hidden focus-visible:ring-4`,`disabled:cursor-default disabled:opacity-50`,`not-disabled:active:scale-97 ease-out transition-transform duration-150`),h=f(m,{variants:{appearance:{ghost:`text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong border-transparent`,outlined:`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 focus-visible:not-disabled:active:border-accent-600`},isLoading:{false:``,true:`opacity-50`},size:{xs:`size-6`,sm:`size-7`,md:`size-9`,lg:`size-10`,xl:`size-12`}},defaultVariants:{appearance:`outlined`,size:`md`}}),g=o(({"aria-disabled":o,appearance:f,asChild:m=!1,children:g,className:_,disabled:v,icon:y,isLoading:b=!1,label:x,size:S=`md`,type:C,...w},T)=>{let E=r(o??v??b),D=b?u(p,{className:`animate-spin`}):y,O={"aria-disabled":E,"data-slot":`icon-button`,className:e(h({appearance:f,isLoading:b,size:S}),_),"data-appearance":f,"data-disabled":E,"data-icon-button":!0,"data-loading":b,"data-size":S,disabled:E,ref:T,...w},k=d(l,{children:[u(`span`,{className:`sr-only`,children:x}),u(t,{svg:D})]});return m?(c(s(g)&&i.only(g),"When using `asChild`, IconButton must be passed a single child as a JSX tag."),u(n,{...O,children:a(g,{},k)})):u(`button`,{...O,type:C??`button`,children:k})});g.displayName=`IconButton`;export{m as n,h as r,g as t};

package/dist/{icon-button-D7hs6bX2.d.ts → icon-button-DuRSCsPh.d.ts}

@@ -1,12 +1,11 @@
-import { t as WithAsChild } from "./as-child-uN_018tj.js";
-import { i as DeepNonNullable, r as VariantProps } from "./index-Bed_XLWa.js";
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { i as DeepNonNullable, r as VariantProps } from "./index-D47aqlpz.js";
 import { ButtonHTMLAttributes, ReactNode } from "react";
-
 //#region src/components/button/icon-button.d.ts
 declare const iconButtonVariants: (props?: ({
   appearance?: "ghost" | "outlined" | null | undefined;
   isLoading?: boolean | null | undefined;
-  size?: "xs" | "sm" | "md" | null | undefined;
+  size?: "lg" | "md" | "sm" | "xl" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type IconButtonVariants = VariantProps<typeof iconButtonVariants>;
 /**
@@ -48,7 +47,7 @@ type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & I
  * as submitting a form or opening a dialog.
  * Renders only a single icon as children with an accessible, screen-reader-only label.
  *
- * @see https://mantle.ngrok.com/components/icon-button
+ * @see https://mantle.ngrok.com/components/actions/icon-button
  *
  * @example
  * ```tsx
@@ -70,7 +69,7 @@ type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & I
 declare const IconButton: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & Partial<DeepNonNullable<import("class-variance-authority").VariantProps<(props?: ({
   appearance?: "ghost" | "outlined" | null | undefined;
   isLoading?: boolean | null | undefined;
-  size?: "xs" | "sm" | "md" | null | undefined;
+  size?: "lg" | "md" | "sm" | "xl" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string>>> & {
   /**
    * The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.

package/dist/icon.d.ts

@@ -1,4 +1,4 @@
-import { t as SvgAttributes } from "./types-BvUzforF.js";
-import { n as IconProps, t as Icon } from "./icon-n49kOh4_.js";
-import { n as SvgOnlyProps, t as SvgOnly } from "./svg-only-f6ToFLH0.js";
+import { t as SvgAttributes } from "./types-D1RY5Tcj.js";
+import { n as IconProps, t as Icon } from "./icon-Cevjo93X.js";
+import { n as SvgOnlyProps, t as SvgOnly } from "./svg-only-BFeFS1aa.js";
 export { Icon, type IconProps, type SvgAttributes, SvgOnly, type SvgOnlyProps };

package/dist/icon.js

@@ -1 +1 @@
-import{t as e}from"./svg-only-CSOaF1tL.js";import{t}from"./icon-SUx16Sl3.js";export{t as Icon,e as SvgOnly};
+import{t as e}from"./svg-only-DDx6FtJd.js";import{t}from"./icon-CDtYjF_H.js";export{t as Icon,e as SvgOnly};

package/dist/icons.d.ts

@@ -1,8 +1,7 @@
-import { t as SvgAttributes } from "./types-BvUzforF.js";
-import { a as AlphanumericSortingDirection, c as TimeSortingDirection, o as SortingDirection, s as SortingMode } from "./direction-CcTY0FmA.js";
+import { t as SvgAttributes } from "./types-D1RY5Tcj.js";
+import { a as AlphanumericSortingDirection, c as TimeSortingDirection, o as SortingDirection, s as SortingMode } from "./direction-BjU0bPST.js";
 import { i as Theme } from "./themes-CYNpplwN.js";
 import { ComponentProps } from "react";
-
 //#region src/components/icons/sort.d.ts
 type Props = SvgAttributes & ({
   mode: Extract<SortingMode, "alphanumeric">;
@@ -21,18 +20,10 @@ type Props = SvgAttributes & ({
    */
   direction: TimeSortingDirection | SortingDirection;
 });
-/**
- * A sorting icon that can be used to indicate the sorting direction of a table column or list.
- * It is aware of the sorting mode (alphanumeric or time) and the sorting direction (ascending or descending).
- */
-declare const SortIcon: {
-  ({
-    mode,
-    direction,
-    ...props
-  }: Props): import("react").JSX.Element;
-  displayName: string;
-};
+declare function SortIcon({ mode, direction, ...props }: Props): import("react").JSX.Element;
+declare namespace SortIcon {
+  var displayName: string;
+}
 //#endregion
 //#region src/components/icons/traffic-policy-file.d.ts
 /**
@@ -67,10 +58,7 @@ type ThemeIconProps = SvgAttributes & {
  * - `light-high-contrast`: SunIcon (fill)
  * - `dark-high-contrast`: MoonIcon (fill)
  */
-declare function ThemeIcon({
-  theme,
-  ...props
-}: ThemeIconProps): import("react").JSX.Element;
+declare function ThemeIcon({ theme, ...props }: ThemeIconProps): import("react").JSX.Element;
 declare namespace ThemeIcon {
   var displayName: string;
 }

package/dist/icons.js

@@ -1 +1 @@
-import{s as e}from"./theme-provider-C5XYi2-H.js";import{t}from"./traffic-policy-file-0g5RXFqu.js";import{t as n}from"./sort-BPX2Fk9t.js";import{jsx as r}from"react/jsx-runtime";import{DesktopIcon as i}from"@phosphor-icons/react/Desktop";import{MoonIcon as a}from"@phosphor-icons/react/Moon";import{SunIcon as o}from"@phosphor-icons/react/Sun";function s(t){return r(c,{theme:e(),...t})}s.displayName=`AutoThemeIcon`;function c({theme:e,...t}){switch(e){case`system`:return r(i,{...t});case`light`:return r(o,{...t});case`dark`:return r(a,{...t});case`light-high-contrast`:return r(o,{...t,weight:`fill`});case`dark-high-contrast`:return r(a,{...t,weight:`fill`})}}c.displayName=`ThemeIcon`;function l(e){return r(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 94 36`,width:`2.61em`,...e,children:r(`path`,{d:`M32.272 12.011c-1.298-1.466-2.904-2.205-4.812-2.205-1.176 0-2.26.233-3.255.7a7.995 7.995 0 0 0-2.581 1.906 9.205 9.205 0 0 0-1.715 2.853 9.773 9.773 0 0 0-.628 3.546c0 1.25.194 2.39.58 3.419.362.98.918 1.877 1.635 2.636A7.543 7.543 0 0 0 24 26.584c.965.41 2.025.617 3.176.617.522 0 1.005-.041 1.445-.116.439-.075.858-.2 1.26-.37.4-.175.79-.398 1.18-.664.385-.27.792-.612 1.21-1.018v4.353h-.005v.421h-5.33l-4.005 4.64v.798h15.037v-24.98h-5.697v1.746Zm-.014 7.979a4.25 4.25 0 0 1-.786 1.215 3.555 3.555 0 0 1-2.592 1.1 3.627 3.627 0 0 1-1.464-.292 3.508 3.508 0 0 1-1.166-.808 3.93 3.93 0 0 1-1.054-2.72c0-.519.097-1.006.298-1.457a3.77 3.77 0 0 1 .804-1.181 4.114 4.114 0 0 1 1.162-.808 3.484 3.484 0 0 1 2.817-.016c.448.19.844.463 1.181.81.336.347.6.743.804 1.194.202.452.298.95.298 1.493 0 .505-.104 1.005-.302 1.47m-16.261-7.708a6.173 6.173 0 0 0-2.06-1.602 4.875 4.875 0 0 0-.57-.22 6.383 6.383 0 0 0-.923-.216H8.383L5.697 13.39v-3.082H.002v16.61h5.695V15.712h5.35l.444-.01v11.214h5.697V16.528c0-.885-.084-1.674-.25-2.366a4.655 4.655 0 0 0-.941-1.877zm38.367-2.018h-6.213l-2.47 2.863v-2.864h-5.7v16.61h5.71l.004-11.117h4.144l4.526-5.26zm31.051 7.672 7.79-7.392v-.281H85.7l-5.975 5.991V0h-5.696v26.87h5.696v-6.766l6.262 6.763h7.663v-.316l-8.233-8.617zm-16.11-5.78a9.436 9.436 0 0 0-3.085-1.842 10.953 10.953 0 0 0-3.855-.664c-1.407 0-2.705.226-3.884.678a9.611 9.611 0 0 0-3.072 1.858 8.488 8.488 0 0 0-2.016 2.788 8.281 8.281 0 0 0-.722 3.449c0 1.362.24 2.596.722 3.707a8.52 8.52 0 0 0 2.002 2.862c.85.798 1.86 1.415 3.036 1.847 1.177.432 2.455.647 3.842.647 1.406 0 2.707-.215 3.919-.647 1.204-.431 2.24-1.04 3.098-1.833a8.583 8.583 0 0 0 2.031-2.816c.493-1.09.742-2.29.742-3.611 0-1.316-.244-2.52-.722-3.612a8.424 8.424 0 0 0-2.035-2.81Zm-3.558 7.864c-.2.461-.463.869-.786 1.215a3.573 3.573 0 0 1-2.592 1.1c-.502 0-.981-.096-1.434-.291a3.44 3.44 0 0 1-1.16-.809 4.155 4.155 0 0 1-.788-1.215 3.825 3.825 0 0 1-.297-1.537c0-.517.098-1.004.297-1.456.201-.451.46-.849.787-1.194a3.579 3.579 0 0 1 2.597-1.1c.502 0 .98.096 1.43.29.448.19.839.461 1.16.81.328.345.586.752.786 1.214.2.461.297.954.297 1.471 0 .538-.096 1.04-.297 1.502`})})}function u(e){return r(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 32 32`,width:`1em`,...e,children:r(`path`,{d:`M27.2 6.18a9.47 9.47 0 0 0-3.12-2.5A9.42 9.42 0 0 0 21.82 3h-6.14l-4.06 4.9V3.1H3V29h8.62V11.53h8.09l.67-.02v17.48H29V12.8c0-1.37-.13-2.6-.38-3.68a7.35 7.35 0 0 0-1.42-2.93Z`})})}export{s as AutoThemeIcon,u as NgrokLettermarkIcon,l as NgrokWordmarkIcon,n as SortIcon,c as ThemeIcon,t as TrafficPolicyFileIcon};
+import{t as e}from"./traffic-policy-file-0g5RXFqu.js";import{t}from"./sort-BPX2Fk9t.js";import{n,t as r}from"./theme-D8kZCOzM.js";import{jsx as i}from"react/jsx-runtime";function a(e){return i(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 94 36`,width:`2.61em`,...e,children:i(`path`,{d:`M32.272 12.011c-1.298-1.466-2.904-2.205-4.812-2.205-1.176 0-2.26.233-3.255.7a7.995 7.995 0 0 0-2.581 1.906 9.205 9.205 0 0 0-1.715 2.853 9.773 9.773 0 0 0-.628 3.546c0 1.25.194 2.39.58 3.419.362.98.918 1.877 1.635 2.636A7.543 7.543 0 0 0 24 26.584c.965.41 2.025.617 3.176.617.522 0 1.005-.041 1.445-.116.439-.075.858-.2 1.26-.37.4-.175.79-.398 1.18-.664.385-.27.792-.612 1.21-1.018v4.353h-.005v.421h-5.33l-4.005 4.64v.798h15.037v-24.98h-5.697v1.746Zm-.014 7.979a4.25 4.25 0 0 1-.786 1.215 3.555 3.555 0 0 1-2.592 1.1 3.627 3.627 0 0 1-1.464-.292 3.508 3.508 0 0 1-1.166-.808 3.93 3.93 0 0 1-1.054-2.72c0-.519.097-1.006.298-1.457a3.77 3.77 0 0 1 .804-1.181 4.114 4.114 0 0 1 1.162-.808 3.484 3.484 0 0 1 2.817-.016c.448.19.844.463 1.181.81.336.347.6.743.804 1.194.202.452.298.95.298 1.493 0 .505-.104 1.005-.302 1.47m-16.261-7.708a6.173 6.173 0 0 0-2.06-1.602 4.875 4.875 0 0 0-.57-.22 6.383 6.383 0 0 0-.923-.216H8.383L5.697 13.39v-3.082H.002v16.61h5.695V15.712h5.35l.444-.01v11.214h5.697V16.528c0-.885-.084-1.674-.25-2.366a4.655 4.655 0 0 0-.941-1.877zm38.367-2.018h-6.213l-2.47 2.863v-2.864h-5.7v16.61h5.71l.004-11.117h4.144l4.526-5.26zm31.051 7.672 7.79-7.392v-.281H85.7l-5.975 5.991V0h-5.696v26.87h5.696v-6.766l6.262 6.763h7.663v-.316l-8.233-8.617zm-16.11-5.78a9.436 9.436 0 0 0-3.085-1.842 10.953 10.953 0 0 0-3.855-.664c-1.407 0-2.705.226-3.884.678a9.611 9.611 0 0 0-3.072 1.858 8.488 8.488 0 0 0-2.016 2.788 8.281 8.281 0 0 0-.722 3.449c0 1.362.24 2.596.722 3.707a8.52 8.52 0 0 0 2.002 2.862c.85.798 1.86 1.415 3.036 1.847 1.177.432 2.455.647 3.842.647 1.406 0 2.707-.215 3.919-.647 1.204-.431 2.24-1.04 3.098-1.833a8.583 8.583 0 0 0 2.031-2.816c.493-1.09.742-2.29.742-3.611 0-1.316-.244-2.52-.722-3.612a8.424 8.424 0 0 0-2.035-2.81Zm-3.558 7.864c-.2.461-.463.869-.786 1.215a3.573 3.573 0 0 1-2.592 1.1c-.502 0-.981-.096-1.434-.291a3.44 3.44 0 0 1-1.16-.809 4.155 4.155 0 0 1-.788-1.215 3.825 3.825 0 0 1-.297-1.537c0-.517.098-1.004.297-1.456.201-.451.46-.849.787-1.194a3.579 3.579 0 0 1 2.597-1.1c.502 0 .98.096 1.43.29.448.19.839.461 1.16.81.328.345.586.752.786 1.214.2.461.297.954.297 1.471 0 .538-.096 1.04-.297 1.502`})})}function o(e){return i(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 32 32`,width:`1em`,...e,children:i(`path`,{d:`M27.2 6.18a9.47 9.47 0 0 0-3.12-2.5A9.42 9.42 0 0 0 21.82 3h-6.14l-4.06 4.9V3.1H3V29h8.62V11.53h8.09l.67-.02v17.48H29V12.8c0-1.37-.13-2.6-.38-3.68a7.35 7.35 0 0 0-1.42-2.93Z`})})}export{r as AutoThemeIcon,o as NgrokLettermarkIcon,a as NgrokWordmarkIcon,t as SortIcon,n as ThemeIcon,e as TrafficPolicyFileIcon};

package/dist/{in-view-bItE1fkG.d.ts → in-view-nkSOdED2.d.ts}

@@ -1,5 +1,4 @@
 import { Ref } from "react";
-
 //#region src/utils/copy-to-clipboard.d.ts
 /**
  * Copy the given string to the clipboard. Uses the Clipboard API when
@@ -102,10 +101,6 @@ type ViewChangeHandler = (entry: IntersectionObserverEntry) => void;
  * // Later, stop observing:
  * stop();
  */
-declare function inView(element: Element, onStart: (element: Element, entry: IntersectionObserverEntry) => void | ViewChangeHandler, {
-  root,
-  margin: rootMargin,
-  amount
-}?: InViewOptions): VoidFunction;
+declare function inView(element: Element, onStart: (element: Element, entry: IntersectionObserverEntry) => void | ViewChangeHandler, { root, margin: rootMargin, amount }?: InViewOptions): VoidFunction;
 //#endregion
 export { composeRefs as a, inView as i, MarginType as n, useComposedRefs as o, ViewChangeHandler as r, copyToClipboard as s, InViewOptions as t };

package/dist/index-BnI3OppC.d.ts

@@ -0,0 +1 @@
+import "./dropdown-menu-DT30TQzL.js";

package/dist/{index-CTU6apE6.d.ts → index-CDwfBOAA.d.ts}

@@ -1,7 +1,8 @@
-import { t as WithAsChild } from "./as-child-uN_018tj.js";
-import { r as VariantProps } from "./index-Bed_XLWa.js";
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { r as VariantProps } from "./index-D47aqlpz.js";
+import "./button-Bw9MpShl.js";
+import "./icon-button-DuRSCsPh.js";
 import { ComponentProps } from "react";
-
 //#region src/components/button/button-group.d.ts
 declare const buttonGroupVariants: (props?: ({
   appearance?: "ghost" | "outlined" | "panel" | null | undefined;
@@ -11,7 +12,7 @@ type ButtonGroupProps = ComponentProps<"div"> & ButtonGroupVariants & WithAsChil
 /**
  * A contained group of related buttons.
  *
- * @see https://mantle.ngrok.com/components/button-group#api-button-group
+ * @see https://mantle.ngrok.com/components/actions/button
  *
  * @example
  * ```tsx

package/dist/{index-Bed_XLWa.d.ts → index-D47aqlpz.d.ts}

@@ -1,6 +1,7 @@
+import "./as-child-CYEVu1WY.js";
+import "./with-style-props-Dq5Vntqy.js";
 import { CSSProperties } from "react";
 import { VariantProps } from "class-variance-authority";
-
 //#region src/types/booleanish.d.ts
 type Booleanish = boolean | "true" | "false";
 /**
@@ -13,7 +14,7 @@ declare function parseBooleanish(value: Booleanish | (string & {}) | undefined |
 /**
  * Makes all properties in an object non-nullable, recursively.
  */
-type DeepNonNullable<Type> = { [Property in keyof Type]-?: Type[Property] & {} };
+type DeepNonNullable<Type> = { [Property in keyof Type]-?: Type[Property] & {}; };
 //#endregion
 //#region src/types/variant-props.d.ts
 /**

package/dist/index-Rv8RL7xy.d.ts

@@ -0,0 +1,25 @@
+import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
+import { ComponentProps } from "react";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/slot/slot.d.ts
+type Props = ComponentProps<typeof Slot> & WithDataSlot;
+/**
+ * Merges its props onto its immediate child. This is useful for creating
+ * components that can be rendered as different elements. Automatically merges
+ * className props using `cx` for proper Tailwind class handling, and
+ * concatenates `data-slot` values in DOM order (the composing parent's slot
+ * chain first, then the child's own) so `asChild` composition accumulates the
+ * whole slot chain instead of one side clobbering the other.
+ *
+ * @see https://mantle.ngrok.com/components/primitives/slot
+ *
+ * @example
+ * ```tsx
+ * <Slot className="custom-class">
+ *   <a href="/">Home</a>
+ * </Slot>
+ * ```
+ */
+declare const Slot$1: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { Slot$1 as t };

package/dist/{input-B3TS9yAP.js → input-Ct1YOqSy.js}

@@ -1 +1 @@
-import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-C1UYP5We.js";import{t as n}from"./icon-SUx16Sl3.js";import{t as r}from"./clsx-DUGZgXfJ.js";import{a as i,r as a}from"./validation-DCyx-ceH.js";import{createContext as o,forwardRef as s,useContext as c,useMemo as l,useRef as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{CheckCircleIcon as p}from"@phosphor-icons/react/CheckCircle";import{WarningIcon as m}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as h}from"@phosphor-icons/react/WarningDiamond";const g=s(({children:e,className:t,...n},r)=>{let i=!!e,a=u(null);return i?d(y,{className:t,forwardedRef:r,innerRef:a,...n,children:e}):d(y,{...n,className:t,forwardedRef:r,innerRef:a,children:d(_,{...n})})});g.displayName=`Input`;const _=s(({"aria-invalid":n,className:r,validation:o,...s},l)=>{let{"aria-invalid":u,forwardedRef:f,innerRef:p,validation:m,...h}=c(v),g=i(),{ariaInvalid:_,validation:y}=a({"aria-invalid":u??n,validation:m??o??g}),b={...h,...s,type:s.type??h.type??`text`};return d(`input`,{"aria-invalid":_,"data-slot":`input-capture`,"data-validation":y,className:t(`placeholder:text-placeholder min-w-0 flex-1 bg-transparent text-left autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] focus:outline-hidden`,r),ref:e(l,f,p),...b})});_.displayName=`InputCapture`;const v=o({validation:void 0,innerRef:{current:null}}),y=({"aria-invalid":e,"aria-disabled":n,"data-slot":r=`input`,children:o,className:s,disabled:c,forwardedRef:u,innerRef:p,style:m,type:h,validation:g,..._})=>{let y=i(),{validation:x}=a({"aria-invalid":e,validation:g??y}),S=l(()=>({"aria-invalid":e,"aria-disabled":n,disabled:c,type:h,validation:g,..._,forwardedRef:u,innerRef:p}),[e,n,c,h,g,_,u,p]);return d(v.Provider,{value:S,children:f(`div`,{role:`none`,"data-slot":r,"data-disabled":(c??n)||void 0,"data-validation":x||void 0,className:t(`pointer-coarse:text-base h-9 text-sm`,`bg-form relative flex w-full items-center gap-1.5 rounded-md border px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-hidden focus-within:ring-4`,`data-disabled:opacity-50`,`has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-5`,`border-form text-strong focus-within:border-accent-600 focus-within:ring-focus-accent`,`data-validation-success:border-success-600 focus-within:data-validation-success:border-success-600 focus-within:data-validation-success:ring-focus-success`,`data-validation-warning:border-warning-600 focus-within:data-validation-warning:border-warning-600 focus-within:data-validation-warning:ring-focus-warning`,`data-validation-error:border-danger-600 focus-within:data-validation-error:border-danger-600 focus-within:data-validation-error:ring-focus-danger`,`autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] has-autofill:bg-blue-50 has-autofill:[-webkit-text-fill-color:var(--text-color-strong)]`,s),onMouseDown:e=>{e.target!==p?.current&&e.preventDefault()},onClick:()=>{p?.current?.focus()},onKeyDown:()=>{p?.current!==document.activeElement&&p?.current?.focus()},style:m,children:[o,d(b,{name:_.name,validation:x})]})})};y.displayName=`InputContainer`;const b=({name:e,validation:t})=>{switch(t){case`error`:return f(`div`,{className:`text-danger-600 order-last select-none`,children:[d(`span`,{className:`sr-only`,children:r(`The value entered for the`,e,`input has failed validation.`)}),d(n,{svg:d(m,{"aria-hidden":!0,weight:`fill`})})]});case`success`:return d(`div`,{className:`text-success-600 order-last select-none`,children:d(n,{svg:d(p,{weight:`fill`})})});case`warning`:return d(`div`,{className:`text-warning-600 order-last select-none`,children:d(n,{svg:d(h,{weight:`fill`})})});default:return null}};b.displayName=`ValidationFeedback`;export{_ as n,g as t};
+import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./icon-CDtYjF_H.js";import{t as r}from"./clsx-DUGZgXfJ.js";import{a as i,r as a}from"./validation-Bpptk_9t.js";import{createContext as o,forwardRef as s,useContext as c,useMemo as l,useRef as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{CheckCircleIcon as p}from"@phosphor-icons/react/CheckCircle";import{WarningIcon as m}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as h}from"@phosphor-icons/react/WarningDiamond";const g=s(({children:e,className:t,...n},r)=>{let i=!!e,a=u(null);return i?d(y,{className:t,forwardedRef:r,innerRef:a,...n,children:e}):d(y,{...n,className:t,forwardedRef:r,innerRef:a,children:d(_,{...n})})});g.displayName=`Input`;const _=s(({"aria-invalid":n,className:r,validation:o,...s},l)=>{let{"aria-invalid":u,forwardedRef:f,innerRef:p,validation:m,...h}=c(v),g=i(),{ariaInvalid:_,validation:y}=a({"aria-invalid":u??n,validation:m??o??g}),b={...h,...s,type:s.type??h.type??`text`};return d(`input`,{"aria-invalid":_,"data-slot":`input-capture`,"data-validation":y,className:t(`placeholder:text-placeholder min-w-0 flex-1 bg-transparent text-left autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] focus:outline-hidden`,r),ref:e(l,f,p),...b})});_.displayName=`InputCapture`;const v=o({validation:void 0,innerRef:{current:null}}),y=({"aria-invalid":e,"aria-disabled":n,"data-slot":r=`input`,children:o,className:s,disabled:c,forwardedRef:u,innerRef:p,style:m,type:h,validation:g,..._})=>{let y=i(),{validation:x}=a({"aria-invalid":e,validation:g??y}),S=l(()=>({"aria-invalid":e,"aria-disabled":n,disabled:c,type:h,validation:g,..._,forwardedRef:u,innerRef:p}),[e,n,c,h,g,_,u,p]);return d(v.Provider,{value:S,children:f(`div`,{role:`none`,"data-slot":r,"data-disabled":(c??n)||void 0,"data-validation":x||void 0,className:t(`pointer-coarse:text-base h-9 text-sm`,`bg-form relative flex w-full items-center gap-1.5 rounded-md border px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-hidden focus-within:ring-4`,`data-disabled:opacity-50`,`has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-5`,`border-form text-strong focus-within:border-accent-600 focus-within:ring-focus-accent`,`data-validation-success:border-success-600 focus-within:data-validation-success:border-success-600 focus-within:data-validation-success:ring-focus-success`,`data-validation-warning:border-warning-600 focus-within:data-validation-warning:border-warning-600 focus-within:data-validation-warning:ring-focus-warning`,`data-validation-error:border-danger-600 focus-within:data-validation-error:border-danger-600 focus-within:data-validation-error:ring-focus-danger`,`autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] has-autofill:bg-blue-50 has-autofill:[-webkit-text-fill-color:var(--text-color-strong)]`,s),onMouseDown:e=>{e.target!==p?.current&&e.preventDefault()},onClick:()=>{p?.current?.focus()},onKeyDown:()=>{p?.current!==document.activeElement&&p?.current?.focus()},style:m,children:[o,d(b,{name:_.name,validation:x})]})})};y.displayName=`InputContainer`;const b=({name:e,validation:t})=>{switch(t){case`error`:return f(`div`,{className:`text-danger-600 order-last select-none`,children:[d(`span`,{className:`sr-only`,children:r(`The value entered for the`,e,`input has failed validation.`)}),d(n,{svg:d(m,{"aria-hidden":!0,weight:`fill`})})]});case`success`:return d(`div`,{className:`text-success-600 order-last select-none`,children:d(n,{svg:d(p,{weight:`fill`})})});case`warning`:return d(`div`,{className:`text-warning-600 order-last select-none`,children:d(n,{svg:d(h,{weight:`fill`})})});default:return null}};b.displayName=`ValidationFeedback`;export{_ as n,g as t};

package/dist/input.d.ts

@@ -1,7 +1,6 @@
-import { o as WithValidation, r as Validation } from "./validation-xyX_6kph.js";
-import { i as WithInputType, n as InputType, r as WithAutoComplete, t as AutoComplete } from "./types-CTam1uIW.js";
+import { o as WithValidation, r as Validation } from "./validation-7QeiTFwl.js";
+import { i as WithInputType, n as InputType, r as WithAutoComplete, t as AutoComplete } from "./types-C19IR7jf.js";
 import { InputHTMLAttributes, PropsWithChildren } from "react";
-
 //#region src/components/input/input.d.ts
 type BaseProps = WithAutoComplete & WithInputType & WithValidation;
 /**
@@ -12,7 +11,7 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "
  * Used to create interactive controls for web-based forms in order to accept data from the user.
  * A versatile input element that supports various types, validation states, and can be composed with other elements.
  *
- * @see https://mantle.ngrok.com/components/input
+ * @see https://mantle.ngrok.com/components/forms/input
  *
  * @example
  * ```tsx
@@ -23,7 +22,7 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "
  * />
  * ```
  */
-declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & WithAutoComplete & WithInputType & WithValidation & {
+declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithAutoComplete & WithInputType & WithValidation & {
   children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;
 type InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & BaseProps;
@@ -31,7 +30,7 @@ type InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComple
  * The actual <input /> element that captures user input.
  * Used internally by Input component or when you need direct control over the input element.
  *
- * @see https://mantle.ngrok.com/components/input
+ * @see https://mantle.ngrok.com/components/forms/input
  *
  * @example
  * ```tsx
@@ -41,7 +40,7 @@ type InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComple
  * </Input>
  * ```
  */
-declare const InputCapture: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & WithAutoComplete & WithInputType & WithValidation & import("react").RefAttributes<HTMLInputElement>>;
+declare const InputCapture: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithAutoComplete & WithInputType & WithValidation & import("react").RefAttributes<HTMLInputElement>>;
 //#endregion
 //#region src/components/input/password-input.d.ts
 type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
@@ -66,7 +65,7 @@ type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoCompl
  *   accurately and may want to verify visually before submitting.
  *
  * **When not to use**
- * - For values that are never sensitive — use a plain {@link https://mantle.ngrok.com/components/input Input}.
+ * - For values that are never sensitive — use a plain {@link https://mantle.ngrok.com/components/forms/input Input}.
  * - For controls where the toggle would be confusing (e.g. masked input
  *   formatting like phone numbers).
  *
@@ -75,7 +74,7 @@ type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoCompl
  * UI control toggles multiple password fields), and `onValueVisibilityChange`
  * to be notified when the user toggles via the built-in button.
  *
- * **Accessibility.** Always pair with a {@link https://mantle.ngrok.com/components/label Label}.
+ * **Accessibility.** Always pair with a {@link https://mantle.ngrok.com/components/forms/label Label}.
  * The toggle button has its own accessible name announcing the current
  * state. The input keeps `autocomplete="current-password"` /
  * `"new-password"` semantics — set `autoComplete` explicitly per flow.
@@ -84,7 +83,7 @@ type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoCompl
  * `type="text"` — some password managers may pause autofill in this state,
  * which is the intended security tradeoff.
  *
- * @see https://mantle.ngrok.com/components/password-input
+ * @see https://mantle.ngrok.com/components/forms/password-input
  *
  * @example
  * ```tsx
@@ -113,7 +112,7 @@ type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoCompl
  * }
  * ```
  */
-declare const PasswordInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & WithValidation & WithAutoComplete & {
+declare const PasswordInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
   /**
    * Callback for when the visibility of the password value changes.
    */

package/dist/input.js

@@ -1 +1 @@
-import{t as e}from"./icon-SUx16Sl3.js";import{n as t,t as n}from"./input-B3TS9yAP.js";import{t as r}from"./use-prefers-reduced-motion-DBqNw1wB.js";import{t as i}from"./is-input-CXmS0OFN.js";import{forwardRef as a,useEffect as o,useRef as s,useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{EyeIcon as d}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as f}from"@phosphor-icons/react/EyeClosed";import{flushSync as p}from"react-dom";const m=a(({onValueVisibilityChange:i,showValue:a=!1,...m},h)=>{let[g,_]=c(a),v=g?`text`:`password`,y=g?d:f,b=s(null),x=s(null);return o(()=>{_(a)},[a]),u(n,{"data-slot":`password-input`,type:v,ref:h,...m,children:[l(t,{}),u(`button`,{type:`button`,tabIndex:-1,className:`text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0`,onClick:()=>{x.current&&=(x.current.cancel(),null);let e=!g;p(()=>{_(e)}),i?.(e);let t=b.current;t&&!r()&&(x.current=t.animate([{transform:`scaleY(0)`},{transform:`scaleY(1)`}],{duration:200,easing:`ease-out`}),x.current.onfinish=()=>{x.current=null})},children:[u(`span`,{className:`sr-only`,children:[`Turn password visibility `,g?`off`:`on`]}),l(e,{ref:b,svg:l(y,{"aria-hidden":!0})})]})]})});m.displayName=`PasswordInput`;export{n as Input,t as InputCapture,m as PasswordInput,i as isInput};
+import{t as e}from"./icon-CDtYjF_H.js";import{n as t,t as n}from"./input-Ct1YOqSy.js";import{t as r}from"./use-prefers-reduced-motion-CagaNRgm.js";import{t as i}from"./is-input-CXmS0OFN.js";import{forwardRef as a,useEffect as o,useRef as s,useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{EyeIcon as d}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as f}from"@phosphor-icons/react/EyeClosed";import{flushSync as p}from"react-dom";const m=a(({onValueVisibilityChange:i,showValue:a=!1,...m},h)=>{let[g,_]=c(a),v=g?`text`:`password`,y=g?d:f,b=s(null),x=s(null);return o(()=>{_(a)},[a]),u(n,{"data-slot":`password-input`,type:v,ref:h,...m,children:[l(t,{}),u(`button`,{type:`button`,tabIndex:-1,className:`text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0`,onClick:()=>{x.current&&=(x.current.cancel(),null);let e=!g;p(()=>{_(e)}),i?.(e);let t=b.current;t&&!r()&&(x.current=t.animate([{transform:`scaleY(0)`},{transform:`scaleY(1)`}],{duration:200,easing:`ease-out`}),x.current.onfinish=()=>{x.current=null})},children:[u(`span`,{className:`sr-only`,children:[`Turn password visibility `,g?`off`:`on`]}),l(e,{ref:b,svg:l(y,{"aria-hidden":!0})})]})]})});m.displayName=`PasswordInput`;export{n as Input,t as InputCapture,m as PasswordInput,i as isInput};

package/dist/{kbd-D6k4Dnrf.js → kbd-K8iaZ-Ti.js}

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{jsx as t}from"react/jsx-runtime";function n({children:n,className:r,...i}){return t(`kbd`,{"data-slot":`kbd`,className:e(`[font-kerning:normal] [font-variant-ligatures:common-ligatures_contextual]`,`appearance-none tabular-nums inline-grid place-items-center size-5 bg-neutral-500/15 px-1 rounded text-mono leading-none font-mono`,r),...i,children:n})}export{n as t};
+import{t as e}from"./cx-IiQEAKf5.js";import{jsx as t}from"react/jsx-runtime";function n({children:n,className:r,...i}){return t(`kbd`,{"data-slot":`kbd`,className:e(`[font-kerning:normal] [font-variant-ligatures:common-ligatures_contextual]`,`appearance-none tabular-nums inline-grid place-items-center size-5 bg-neutral-500/15 px-1 rounded text-mono leading-none font-mono`,r),...i,children:n})}export{n as t};

package/dist/kbd.d.ts

@@ -1,5 +1,4 @@
 import { ComponentProps } from "react";
-
 //#region src/components/kbd/kbd.d.ts
 /**
  * A square, centered keyboard "key" chip for rendering shortcut hints —
@@ -13,7 +12,7 @@ import { ComponentProps } from "react";
  * - Inline with prose: "Press `Kbd K` to open search."
  *
  * **When not to use**
- * - For arbitrary monospace text — use {@link https://mantle.ngrok.com/components/code Code}.
+ * - For arbitrary monospace text — use {@link https://mantle.ngrok.com/components/data-display/code Code}.
  * - For chord-style multi-key shortcuts as a single chip — render multiple
  *   `<Kbd>` elements separated by `+` text instead.
  *
@@ -22,7 +21,7 @@ import { ComponentProps } from "react";
  * `aria-label` on the `<Kbd>` or include a visually-hidden label inside,
  * and mark the visible glyph `aria-hidden`.
  *
- * @see https://mantle.ngrok.com/components/kbd
+ * @see https://mantle.ngrok.com/components/data-display/kbd
  *
  * @example
  * ```tsx
@@ -43,10 +42,6 @@ import { ComponentProps } from "react";
  * </Kbd>
  * ```
  */
-declare function Kbd({
-  children,
-  className,
-  ...props
-}: ComponentProps<"kbd">): import("react").JSX.Element;
+declare function Kbd({ children, className, ...props }: ComponentProps<"kbd">): import("react").JSX.Element;
 //#endregion
 export { Kbd };

package/dist/kbd.js

@@ -1 +1 @@
-import{t as e}from"./kbd-D6k4Dnrf.js";export{e as Kbd};
+import{t as e}from"./kbd-K8iaZ-Ti.js";export{e as Kbd};

package/dist/{label-BLXfnQmn.js → label-BMlHW_2D.js}

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";const r=t(({"aria-disabled":t,children:r,className:i,disabled:a,onMouseDown:o,...s},c)=>n(`label`,{"aria-disabled":a??t,"data-slot":`label`,className:e(`text-strong cursor-pointer text-sm peer-disabled:cursor-default has-disabled:cursor-default aria-disabled:cursor-default font-sans`,`[:where(&:not(:has(input,textarea,select,button,[contenteditable])))]:font-medium`,i),onMouseDown:e=>{e.target.closest(`button, input, select, textarea`)||(o?.(e),!e.defaultPrevented&&e.detail>1&&e.preventDefault())},ref:c,...s,children:r}));r.displayName=`Label`;export{r as t};
+import{t as e}from"./cx-IiQEAKf5.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";const r=t(({"aria-disabled":t,children:r,className:i,disabled:a,onMouseDown:o,...s},c)=>n(`label`,{"aria-disabled":a??t,"data-slot":`label`,className:e(`text-strong cursor-pointer text-sm peer-disabled:cursor-default has-disabled:cursor-default aria-disabled:cursor-default font-sans`,`[:where(&:not(:has(input,textarea,select,button,[contenteditable])))]:font-medium`,i),onMouseDown:e=>{e.target.closest(`button, input, select, textarea`)||(o?.(e),!e.defaultPrevented&&e.detail>1&&e.preventDefault())},ref:c,...s,children:r}));r.displayName=`Label`;export{r as t};

package/dist/{label-PY0qM0G5.d.ts → label-v2-bv98k.d.ts}

@@ -33,7 +33,7 @@
  * passing a font-weight utility on the `Label` itself, e.g.
  * `<Label className="font-bold">`.
  *
- * @see https://mantle.ngrok.com/components/label
+ * @see https://mantle.ngrok.com/components/forms/label
  *
  * @example
  * ```tsx

package/dist/label.d.ts

@@ -1,2 +1,2 @@
-import { t as Label } from "./label-PY0qM0G5.js";
+import { t as Label } from "./label-v2-bv98k.js";
 export { Label };

package/dist/label.js

@@ -1 +1 @@
-import{t as e}from"./label-BLXfnQmn.js";export{e as Label};
+import{t as e}from"./label-BMlHW_2D.js";export{e as Label};