@ngrok/mantle 0.84.2 → 0.84.3

package/dist/agent.json

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

package/dist/input.d.ts

@@ -2,6 +2,9 @@ import { o as WithValidation, r as Validation } from "./field-7QeiTFwl.js";
 import { a as AutoComplete, c as WithInputType, i as InputProps, n as InputCapture, o as InputType, r as InputCaptureProps, s as WithAutoComplete, t as Input } from "./input-DpnC3Xgj.js";
 import { ComponentProps } from "react";
 //#region src/components/input/password-input.d.ts
+/**
+ * The props for the `PasswordInput` component.
+ */
 type PasswordInputProps = Omit<ComponentProps<"input">, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
   /**
    * Called with the next visibility when the user clicks the toggle. In
@@ -26,14 +29,16 @@ type PasswordInputProps = Omit<ComponentProps<"input">, "autoComplete" | "type">
  *   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/forms/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).
  *
  * **Visibility state.** The toggle is uncontrolled by default. Pass
- * `showValue` to control the visibility from the outside (useful when one
- * UI control toggles multiple password fields), and `onValueVisibilityChange`
- * to be notified when the user toggles via the built-in button.
+ * `showValue` to control the visibility from the outside, for example when
+ * one control reveals several password fields. Pass `onValueVisibilityChange`
+ * to receive the next visibility when the user clicks the built-in toggle.
+ * The eye icon animates on every visibility change, from the built-in toggle
+ * or from `showValue`, unless the user prefers reduced motion.
  *
  * **Accessibility.** Always pair with a {@link https://mantle.ngrok.com/components/forms/label Label}.
  * The toggle is a focusable `aria-pressed` button named "Show value". Its
@@ -47,11 +52,14 @@ type PasswordInputProps = Omit<ComponentProps<"input">, "autoComplete" | "type">
  * | Data Attribute | Value | Description |
  * | --- | --- | --- |
  * | `data-slot` | `"password-input"` | The chrome around the input. |
+ * | `data-slot` | `"input-capture"` | The `<input>` element. |
  * | `data-slot` | `"password-input-toggle"` | The visibility toggle button. |
+ * | `data-disabled` | present when disabled | On the chrome. Style with `data-disabled:`. |
+ * | `data-validation` | `"error"` \| `"success"` \| `"warning"` | On the chrome and the `<input>`. Omitted when unset. |
  *
  * **Browser password managers.** When revealed, the input switches to
- * `type="text"` — some password managers may pause autofill in this state,
- * which is the intended security tradeoff.
+ * `type="text"`. Some password managers may pause autofill in this state,
+ * which is the intended security trade-off.
  *
  * @see https://mantle.ngrok.com/components/forms/password-input
  *

package/dist/input.js

@@ -1 +1 @@
-import{t as e}from"./icon-CGKaq_tV.js";import{n as t,t as n}from"./input-BhykQSvJ.js";import{t as r}from"./use-prefers-reduced-motion-DHYDQk1h.js";import{t as i}from"./input-DQyN6gN0.js";import{useId as a,useRef as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{flushSync as u}from"react-dom";import{EyeIcon as d}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as f}from"@phosphor-icons/react/EyeClosed";const p=({disabled:i,id:p,onValueVisibilityChange:m,ref:h,showValue:g,..._})=>{let v=a(),y=p??v,b=g!=null,[x,S]=s(!1),C=b?g:x,w=C?`text`:`password`,T=C?d:f,E=o(null),D=o(null);return l(n,{"data-slot":`password-input`,disabled:i,id:y,type:w,ref:h,..._,children:[c(t,{}),c(`button`,{type:`button`,disabled:i,"data-slot":`password-input-toggle`,"aria-label":`Show value`,"aria-pressed":C,"aria-controls":y,className:`text-body hover:text-strong focus-visible:ring-focus-accent ml-1 cursor-pointer rounded-xs bg-inherit p-0 focus-visible:ring-2 focus-visible:outline-hidden`,onClick:()=>{D.current&&=(D.current.cancel(),null);let e=!C;u(()=>{b||S(e),m?.(e)});let t=E.current;t&&!r()&&(D.current=t.animate([{transform:`scaleY(0)`},{transform:`scaleY(1)`}],{duration:200,easing:`ease-out`}),D.current.onfinish=()=>{D.current=null},D.current.finished.catch(()=>{}))},children:c(e,{ref:E,svg:c(T,{"aria-hidden":!0})})})]})};export{n as Input,t as InputCapture,p as PasswordInput,i as isInput};
+import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{t}from"./icon-CGKaq_tV.js";import{n,t as r}from"./input-BhykQSvJ.js";import{t as i}from"./use-prefers-reduced-motion-DHYDQk1h.js";import{t as a}from"./input-DQyN6gN0.js";import{useId 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";const p=({disabled:a,id:p,onValueVisibilityChange:m,ref:h,showValue:g,..._})=>{let v=o(),y=p??v,b=g!=null,[x,S]=c(!1),C=b?g:x,w=C?`text`:`password`,T=C?d:f,E=s(null),D=s(C);return e(()=>{if(D.current===C)return;D.current=C;let e=E.current;e==null||i()||e.animate([{transform:`scaleY(0)`},{transform:`scaleY(1)`}],{duration:200,easing:`ease-out`})},[C]),u(r,{"data-slot":`password-input`,disabled:a,id:y,type:w,ref:h,..._,children:[l(n,{}),l(`button`,{type:`button`,disabled:a,"data-slot":`password-input-toggle`,"aria-label":`Show value`,"aria-pressed":C,"aria-controls":y,className:`text-body hover:text-strong focus-visible:ring-focus-accent ml-1 cursor-pointer rounded-xs bg-inherit p-0 focus-visible:ring-2 focus-visible:outline-hidden`,onClick:()=>{let e=!C;b||S(e),m?.(e)},children:l(t,{ref:E,svg:l(T,{"aria-hidden":!0})})})]})};export{r as Input,n as InputCapture,p as PasswordInput,a as isInput};

package/dist/llms.txt

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

package/package.json

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