@ngrok/mantle 0.76.11 → 0.78.0

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-Ct1YOqSy.js

@@ -0,0 +1 @@
+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,52 +1,6 @@
-import { o as WithValidation, r as Validation } from "./validation-xyX_6kph.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/types.d.ts
-/**
- * (Not a Boolean attribute!) The autocomplete attribute takes as its value a space-separated string that describes what,
- * if any, type of autocomplete functionality the input should provide. A typical implementation of autocomplete recalls
- * previous values entered in the same input field, but more complex forms of autocomplete can exist. For instance, a
- * browser could integrate with a device's contacts list to autocomplete email addresses in an email input field.
- *
- * The autocomplete attribute is valid on hidden, text, search, url, tel, email, date, month, week, time, datetime-local,
- * number, range, color, and password. This attribute has no effect on input types that do not return numeric or text
- * data, being valid for all input types except checkbox, radio, file, or any of the button types.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
- */
-type AutoComplete = "off" | "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo";
-type WithAutoComplete = {
-  /**
-   * (Not a Boolean attribute!) The autocomplete attribute takes as its value a space-separated string that describes what,
-   * if any, type of autocomplete functionality the input should provide. A typical implementation of autocomplete recalls
-   * previous values entered in the same input field, but more complex forms of autocomplete can exist. For instance, a
-   * browser could integrate with a device's contacts list to autocomplete email addresses in an email input field.
-   *
-   * The autocomplete attribute is valid on hidden, text, search, url, tel, email, date, month, week, time, datetime-local,
-   * number, range, color, and password. This attribute has no effect on input types that do not return numeric or text
-   * data, being valid for all input types except checkbox, radio, file, or any of the button types.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
-   */
-  autoComplete?: AutoComplete;
-};
-/**
- * A string specifying the type of control to render. For example, to create a checkbox, a value of `"checkbox"` is used.
- * If omitted (or an unknown value is specified), the input type `"text"` is used, creating a plaintext input field.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
- */
-type InputType = "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week";
-type WithInputType = {
-  /**
-   * A string specifying the type of control to render. For example, to create a checkbox, a value of `"checkbox"` is used.
-   * If omitted (or an unknown value is specified), the input type `"text"` is used, creating a plaintext input field.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
-   */
-  type?: InputType;
-};
-//#endregion
 //#region src/components/input/input.d.ts
 type BaseProps = WithAutoComplete & WithInputType & WithValidation;
 /**
@@ -57,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
@@ -68,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;
@@ -76,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
@@ -86,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 & {
@@ -111,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).
  *
@@ -120,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.
@@ -129,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
@@ -158,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"./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{t as o}from"./use-prefers-reduced-motion-CWIoFA6W.js";import{t as s}from"./is-input-CXmS0OFN.js";import{createContext as c,forwardRef as l,useContext as u,useEffect as d,useMemo as f,useRef as p,useState as m}from"react";import{jsx as h,jsxs as g}from"react/jsx-runtime";import{CheckCircleIcon as _}from"@phosphor-icons/react/CheckCircle";import{WarningIcon as v}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as y}from"@phosphor-icons/react/WarningDiamond";import{EyeIcon as b}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as x}from"@phosphor-icons/react/EyeClosed";import{flushSync as S}from"react-dom";const C=l(({children:e,className:t,...n},r)=>{let i=!!e,a=p(null);return i?h(E,{className:t,forwardedRef:r,innerRef:a,...n,children:e}):h(E,{...n,className:t,forwardedRef:r,innerRef:a,children:h(w,{...n})})});C.displayName=`Input`;const w=l(({"aria-invalid":n,className:r,validation:o,...s},c)=>{let{"aria-invalid":l,forwardedRef:d,innerRef:f,validation:p,...m}=u(T),g=i(),{ariaInvalid:_,validation:v}=a({"aria-invalid":l??n,validation:p??o??g}),y={...m,...s,type:s.type??m.type??`text`};return h(`input`,{"aria-invalid":_,"data-slot":`input-capture`,"data-validation":v,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(c,d,f),...y})});w.displayName=`InputCapture`;const T=c({validation:void 0,innerRef:{current:null}}),E=({"aria-invalid":e,"aria-disabled":n,"data-slot":r=`input`,children:o,className:s,disabled:c,forwardedRef:l,innerRef:u,style:d,type:p,validation:m,..._})=>{let v=i(),{validation:y}=a({"aria-invalid":e,validation:m??v}),b=f(()=>({"aria-invalid":e,"aria-disabled":n,disabled:c,type:p,validation:m,..._,forwardedRef:l,innerRef:u}),[e,n,c,p,m,_,l,u]);return h(T.Provider,{value:b,children:g(`div`,{role:`none`,"data-slot":r,"data-disabled":(c??n)||void 0,"data-validation":y||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!==u?.current&&e.preventDefault()},onClick:()=>{u?.current?.focus()},onKeyDown:()=>{u?.current!==document.activeElement&&u?.current?.focus()},style:d,children:[o,h(D,{name:_.name,validation:y})]})})};E.displayName=`InputContainer`;const D=({name:e,validation:t})=>{switch(t){case`error`:return g(`div`,{className:`text-danger-600 order-last select-none`,children:[h(`span`,{className:`sr-only`,children:r(`The value entered for the`,e,`input has failed validation.`)}),h(n,{svg:h(v,{"aria-hidden":!0,weight:`fill`})})]});case`success`:return h(`div`,{className:`text-success-600 order-last select-none`,children:h(n,{svg:h(_,{weight:`fill`})})});case`warning`:return h(`div`,{className:`text-warning-600 order-last select-none`,children:h(n,{svg:h(y,{weight:`fill`})})});default:return null}};D.displayName=`ValidationFeedback`;const O=l(({onValueVisibilityChange:e,showValue:t=!1,...r},i)=>{let[a,s]=m(t),c=a?`text`:`password`,l=a?b:x,u=p(null),f=p(null);return d(()=>{s(t)},[t]),g(C,{"data-slot":`password-input`,type:c,ref:i,...r,children:[h(w,{}),g(`button`,{type:`button`,tabIndex:-1,className:`text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0`,onClick:()=>{f.current&&=(f.current.cancel(),null);let t=!a;S(()=>{s(t)}),e?.(t);let n=u.current;n&&!o()&&(f.current=n.animate([{transform:`scaleY(0)`},{transform:`scaleY(1)`}],{duration:200,easing:`ease-out`}),f.current.onfinish=()=>{f.current=null})},children:[g(`span`,{className:`sr-only`,children:[`Turn password visibility `,a?`off`:`on`]}),h(n,{ref:u,svg:h(l,{"aria-hidden":!0})})]})]})});O.displayName=`PasswordInput`;export{C as Input,w as InputCapture,O as PasswordInput,s 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-v2-bv98k.d.ts

@@ -0,0 +1,69 @@
+//#region src/components/label/label.d.ts
+/**
+ * A caption for a form control — input, checkbox, radio, switch, select.
+ * Renders a native `<label>`. Pair every form control with a `Label` so the
+ * control has an accessible name, clicks on the label focus the control, and
+ * screen readers announce the field correctly.
+ *
+ * **When to use**
+ * - Every visible form control. Always.
+ * - Above or beside an input to describe it ("Email", "API key").
+ * - Wrapping a checkbox or radio next to its descriptive text.
+ *
+ * **When not to use**
+ * - For static UI text that isn't labeling a control — use a heading or
+ *   plain `<p>`/`<span>`.
+ * - As a substitute for `aria-label` on non-`<input>` widgets that don't
+ *   support `<label for>` association.
+ *
+ * **Two ways to associate.** Either wrap the control inside the `<Label>`
+ * (implicit association — simplest) or set `htmlFor` to the control's `id`
+ * (explicit — required when the control isn't a child).
+ *
+ * **Disabled state.** Pass `disabled` to render the label in a disabled
+ * style. Typically you'll want this to mirror the underlying control's
+ * disabled state so the visual treatment stays consistent.
+ *
+ * **Font weight.** A `Label` automatically gets `font-medium` when it does
+ * **not** contain a nested form control (`<input>`, `<textarea>`, `<select>`,
+ * `<button>`, or `[contenteditable]`). When the label *does* wrap a control,
+ * the auto default is intentionally skipped so the control's own typography
+ * isn't bolded — apply `font-medium` to your own caption element (e.g. a
+ * `<span>` or `<p>`) inside the label. Override the default at any time by
+ * passing a font-weight utility on the `Label` itself, e.g.
+ * `<Label className="font-bold">`.
+ *
+ * @see https://mantle.ngrok.com/components/forms/label
+ *
+ * @example
+ * ```tsx
+ * import { Label } from "@ngrok/mantle/label";
+ * import { Input } from "@ngrok/mantle/input";
+ *
+ * // Implicit — control nested inside the label.
+ * <Label className="grid gap-1">
+ *   <span>Email</span>
+ *   <Input type="email" name="email" />
+ * </Label>
+ *
+ * // Explicit — htmlFor matches the control's id.
+ * <div className="grid gap-1">
+ *   <Label htmlFor="api-key">API key</Label>
+ *   <Input id="api-key" name="apiKey" />
+ * </div>
+ *
+ * // Inline label for a checkbox.
+ * <Label className="flex items-center gap-2">
+ *   <Checkbox name="terms" />
+ *   <span>I agree to the terms</span>
+ * </Label>
+ * ```
+ */
+declare const Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+  /**
+   * If set, the label will appear disabled.
+   */
+  disabled?: boolean;
+} & import("react").RefAttributes<HTMLLabelElement>>;
+//#endregion
+export { Label as t };

package/dist/label.d.ts

@@ -1,69 +1,2 @@
-//#region src/components/label/label.d.ts
-/**
- * A caption for a form control — input, checkbox, radio, switch, select.
- * Renders a native `<label>`. Pair every form control with a `Label` so the
- * control has an accessible name, clicks on the label focus the control, and
- * screen readers announce the field correctly.
- *
- * **When to use**
- * - Every visible form control. Always.
- * - Above or beside an input to describe it ("Email", "API key").
- * - Wrapping a checkbox or radio next to its descriptive text.
- *
- * **When not to use**
- * - For static UI text that isn't labeling a control — use a heading or
- *   plain `<p>`/`<span>`.
- * - As a substitute for `aria-label` on non-`<input>` widgets that don't
- *   support `<label for>` association.
- *
- * **Two ways to associate.** Either wrap the control inside the `<Label>`
- * (implicit association — simplest) or set `htmlFor` to the control's `id`
- * (explicit — required when the control isn't a child).
- *
- * **Disabled state.** Pass `disabled` to render the label in a disabled
- * style. Typically you'll want this to mirror the underlying control's
- * disabled state so the visual treatment stays consistent.
- *
- * **Font weight.** A `Label` automatically gets `font-medium` when it does
- * **not** contain a nested form control (`<input>`, `<textarea>`, `<select>`,
- * `<button>`, or `[contenteditable]`). When the label *does* wrap a control,
- * the auto default is intentionally skipped so the control's own typography
- * isn't bolded — apply `font-medium` to your own caption element (e.g. a
- * `<span>` or `<p>`) inside the label. Override the default at any time by
- * passing a font-weight utility on the `Label` itself, e.g.
- * `<Label className="font-bold">`.
- *
- * @see https://mantle.ngrok.com/components/label
- *
- * @example
- * ```tsx
- * import { Label } from "@ngrok/mantle/label";
- * import { Input } from "@ngrok/mantle/input";
- *
- * // Implicit — control nested inside the label.
- * <Label className="grid gap-1">
- *   <span>Email</span>
- *   <Input type="email" name="email" />
- * </Label>
- *
- * // Explicit — htmlFor matches the control's id.
- * <div className="grid gap-1">
- *   <Label htmlFor="api-key">API key</Label>
- *   <Input id="api-key" name="apiKey" />
- * </div>
- *
- * // Inline label for a checkbox.
- * <Label className="flex items-center gap-2">
- *   <Checkbox name="terms" />
- *   <span>I agree to the terms</span>
- * </Label>
- * ```
- */
-declare const Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-  /**
-   * If set, the label will appear disabled.
-   */
-  disabled?: boolean;
-} & import("react").RefAttributes<HTMLLabelElement>>;
-//#endregion
+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};