@ngrok/mantle 0.76.11 → 0.77.0

package/dist/hooks.d.ts

@@ -1,4 +1,4 @@
-import { n as MarginType, o as useComposedRefs, s as copyToClipboard } from "./in-view-BC3wmz-a.js";
+import { n as MarginType, o as useComposedRefs, s as copyToClipboard } from "./in-view-bItE1fkG.js";
 import { RefObject, useEffect } from "react";
 
 //#region src/hooks/use-breakpoint.d.ts
@@ -170,6 +170,43 @@ declare function useCallbackRef<T extends (...args: unknown[]) => unknown>(callb
  */
 declare function useCopyToClipboard(): typeof copyToClipboard;
 //#endregion
+//#region src/hooks/use-debounce.d.ts
+/**
+ * Options for {@link useDebounce}.
+ */
+type Options$1 = {
+  /**
+   * The delay in milliseconds to wait after the last change to `value`
+   * before the debounced copy updates.
+   */
+  waitMs: number;
+};
+/**
+ * Returns a debounced copy of `value`: it only updates after `value` has
+ * stopped changing for `options.waitMs` milliseconds. Each change restarts
+ * the timer, so rapid successive changes collapse into a single trailing
+ * update.
+ *
+ * SSR-safe: the server render simply returns the current value (timers
+ * never run there). To debounce a function instead of a value, use
+ * {@link useDebouncedCallback}.
+ *
+ * @param value - The value to debounce. The returned copy lags behind it.
+ * @param options - Debounce options.
+ * @param options.waitMs - Milliseconds of inactivity to wait before the
+ *   debounced copy updates.
+ * @returns The debounced copy of `value`.
+ *
+ * @example
+ * ```tsx
+ * const [searchQuery, setSearchQuery] = useState("");
+ * const debouncedSearchQuery = useDebounce(searchQuery, { waitMs: 300 });
+ * // debouncedSearchQuery lags searchQuery until typing pauses for 300ms,
+ * // so queries keyed on it fire once per pause instead of per keystroke
+ * ```
+ */
+declare function useDebounce<T>(value: T, options: Options$1): T;
+//#endregion
 //#region src/hooks/use-debounced-callback.d.ts
 /**
  * Options for {@link useDebouncedCallback}.
@@ -224,28 +261,24 @@ declare function useDebouncedCallback<T extends (...args: unknown[]) => unknown>
 //#endregion
 //#region src/hooks/use-is-hydrated.d.ts
 /**
- * React hook that returns whether the component tree has been hydrated
- * on the client.
- *
- * Uses `useSyncExternalStore` to ensure the value is consistent between
- * server and client rendering, preventing hydration mismatches.
- *
- * - On the server, it always returns `false`.
- * - On the client (after hydration), it returns `true`.
- *
- * @see https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store
+ * Returns `false` during server rendering and the initial hydration render,
+ * then `true` on the client — without hydration mismatches, because React
+ * uses the server snapshot for the hydration pass and re-renders once with
+ * the client snapshot afterwards.
  *
- * @returns {boolean} `true` once hydration has occurred on the client,
- * otherwise `false`.
+ * Use it to gate UI whose initial state only the client can know (for
+ * example, uncontrolled inputs whose mount-time defaults come from
+ * localStorage): render a same-size placeholder until hydration so the real
+ * UI mounts exactly once, with the real client-side values.
  *
  * @example
- * const isHydrated = useIsHydrated();
- *
- * if (!isHydrated) {
- *   return <span style={{ visibility: "hidden" }}>Loading…</span>;
+ * ```tsx
+ * function PreferencesPanel() {
+ *   const isHydrated = useIsHydrated();
+ *   // localStorage-backed defaults are only correct on the client
+ *   return isHydrated ? <PreferenceControls /> : <PreferencesSkeleton />;
  * }
- *
- * return <span>Ready!</span>;
+ * ```
  */
 declare function useIsHydrated(): boolean;
 //#endregion
@@ -284,6 +317,40 @@ declare function useIsHydrated(): boolean;
  */
 declare const useIsomorphicLayoutEffect: typeof useEffect;
 //#endregion
+//#region src/hooks/use-local-storage.d.ts
+/**
+ * SSR-safe `useSyncExternalStore`-backed localStorage string state.
+ *
+ * Contract:
+ *
+ * - Server rendering returns `defaultValue` and never touches localStorage.
+ * - Values are JSON-encoded on write and JSON-decoded on read — the same
+ *   wire format popular hooks libraries (e.g. `@uidotdev/usehooks`) use,
+ *   so existing stored entries remain readable.
+ * - The setter dispatches a synthetic `storage` event (tagged with its
+ *   `storageArea`) so every same-key hook instance in the tab stays in
+ *   sync; the native `storage` event covers other tabs. Subscriptions are
+ *   filtered per key and per storage area, so unrelated keys and
+ *   sessionStorage churn never wake this hook.
+ * - Missing, corrupt, or non-string entries resolve to `defaultValue`; the
+ *   hook never seeds `defaultValue` into storage on its own (reading is
+ *   side-effect free).
+ *
+ * @param key - The localStorage key to read and write.
+ * @param defaultValue - Returned when no valid entry exists for `key` and
+ *   during server rendering.
+ * @returns A `[value, setValue]` tuple. `setValue` persists the value and
+ *   notifies every same-key hook instance.
+ *
+ * @example
+ * ```tsx
+ * const [dateFormat, setDateFormat] = useLocalStorage("dateFormat", "MMM d, y");
+ * // dateFormat === "MMM d, y" until a preference is stored
+ * setDateFormat("y-MM-dd"); // persists + syncs every subscribed instance
+ * ```
+ */
+declare function useLocalStorage(key: string, defaultValue: string): readonly [value: string, setValue: (next: string) => void];
+//#endregion
 //#region src/hooks/use-matches-media-query.d.ts
 /**
  * React hook that subscribes to a CSS media query and returns whether it
@@ -315,6 +382,36 @@ declare const useIsomorphicLayoutEffect: typeof useEffect;
  */
 declare function useMatchesMediaQuery(query: string): boolean;
 //#endregion
+//#region src/hooks/use-session-storage.d.ts
+/**
+ * SSR-safe `useSyncExternalStore`-backed sessionStorage string state. The
+ * per-tab sibling of {@link useLocalStorage}, with the same contract:
+ *
+ * - Server rendering returns `defaultValue` and never touches sessionStorage.
+ * - Values are JSON-encoded on write and JSON-decoded on read.
+ * - The setter dispatches a synthetic `storage` event (tagged with its
+ *   `storageArea`) so every same-key hook instance in the tab stays in
+ *   sync. Subscriptions are filtered per key and per storage area, so
+ *   unrelated keys and localStorage churn never wake this hook.
+ * - Missing, corrupt, or non-string entries resolve to `defaultValue`; the
+ *   hook never seeds `defaultValue` into storage on its own (reading is
+ *   side-effect free).
+ *
+ * @param key - The sessionStorage key to read and write.
+ * @param defaultValue - Returned when no valid entry exists for `key` and
+ *   during server rendering.
+ * @returns A `[value, setValue]` tuple. `setValue` persists the value for
+ *   the rest of the tab session and notifies every same-key hook instance.
+ *
+ * @example
+ * ```tsx
+ * const [showWarning, setShowWarning] = useSessionStorage("show-warning", "true");
+ * // showWarning === "true" until this tab stores a preference
+ * setShowWarning("false"); // persists for the rest of the tab session
+ * ```
+ */
+declare function useSessionStorage(key: string, defaultValue: string): readonly [value: string, setValue: (next: string) => void];
+//#endregion
 //#region src/hooks/use-prefers-reduced-motion.d.ts
 /**
  * Imperatively reads the current `prefers-reduced-motion` preference once at
@@ -376,49 +473,6 @@ declare function getPrefersReducedMotion(): boolean;
  */
 declare function usePrefersReducedMotion(): boolean;
 //#endregion
-//#region src/hooks/use-random-stable-id.d.ts
-/**
- * React hook that returns a random, stable id (e.g. `"mantle-a3f9k7q"`)
- * suitable for DOM `id` attributes and `aria-*` references.
- *
- * Unlike React's built-in `useId`, the generated suffix does not contain
- * special characters (`:`). The default id is safe to use directly in CSS
- * selectors and `querySelector` calls; if you provide a custom `prefix`,
- * keep it selector-safe or escape the final id with `CSS.escape()` before
- * querying. The id is generated once for the lifetime of the component and
- * is stable across re-renders, but a new value is produced when `prefix`
- * changes.
- *
- * @param prefix - Optional string prepended to the generated suffix.
- *   Whitespace-only or empty values fall back to `"mantle"`. Use a
- *   selector-safe prefix if you plan to reference the id in CSS selectors
- *   without escaping. Defaults to `"mantle"`.
- * @returns A string of the form `"<prefix>-<7-char-random>"`.
- *
- * @example
- * // Associate a label with a custom input
- * const id = useRandomStableId("email-input");
- *
- * return (
- *   <>
- *     <label htmlFor={id}>Email</label>
- *     <input id={id} type="email" />
- *   </>
- * );
- *
- * @example
- * // Use as an aria-controls reference
- * const panelId = useRandomStableId("panel");
- *
- * return (
- *   <>
- *     <button aria-controls={panelId}>Toggle</button>
- *     <div id={panelId}>Panel contents</div>
- *   </>
- * );
- */
-declare const useRandomStableId: (prefix?: string) => string;
-//#endregion
 //#region src/hooks/use-scroll-behavior.d.ts
 /**
  * `scroll-behavior` values:
@@ -552,8 +606,7 @@ type UseUndoRedoReturn<T> = {
   redo: (current: T) => T | undefined;
 };
 /**
- * Generic undo/redo hook backed by a reducer that maintains two history
- * stacks (undo and redo).
+ * Generic undo/redo hook that maintains two history stacks (undo and redo).
  *
  * The hook does not own your application state — instead it helps you
  * snapshot it. Call `push(snapshot)` *before* mutating state to capture
@@ -562,8 +615,15 @@ type UseUndoRedoReturn<T> = {
  * the snapshot to apply, or `undefined` if their stack is empty. Pushing a
  * new snapshot clears the redo stack, matching standard editor semantics.
  *
+ * `push`, `undo`, and `redo` operate on the live history, so calling them
+ * multiple times within a single event handler works as expected — each
+ * call sees the result of the previous one.
+ *
  * @typeParam T - The type of the value being snapshotted (e.g. a list of
- *   items, a serialized form value, etc.).
+ *   items, a serialized form value, etc.). Constrained to non-nullish
+ *   values: `undefined` is reserved as the "stack is empty" sentinel and
+ *   cannot itself be stored as a snapshot, and `null` snapshots would
+ *   defeat the truthiness checks used at typical call sites.
  *
  * @returns An object with the current undo/redo capability flags and
  *   actions:
@@ -613,6 +673,6 @@ type UseUndoRedoReturn<T> = {
  *   </div>
  * );
  */
-declare function useUndoRedo<T>(): UseUndoRedoReturn<T>;
+declare function useUndoRedo<T extends NonNullable<unknown>>(): UseUndoRedoReturn<T>;
 //#endregion
-export { type Breakpoint, type TailwindBreakpoint, type UseInViewOptions, type UseUndoRedoReturn, breakpoints, getPrefersReducedMotion, useBreakpoint, useCallbackRef, useComposedRefs, useCopyToClipboard, useDebouncedCallback, useInView, useIsBelowBreakpoint, useIsHydrated, useIsomorphicLayoutEffect, useMatchesMediaQuery, usePrefersReducedMotion, useRandomStableId, useScrollBehavior, useUndoRedo };
+export { type Breakpoint, type TailwindBreakpoint, type UseInViewOptions, type UseUndoRedoReturn, breakpoints, getPrefersReducedMotion, useBreakpoint, useCallbackRef, useComposedRefs, useCopyToClipboard, useDebounce, useDebouncedCallback, useInView, useIsBelowBreakpoint, useIsHydrated, useIsomorphicLayoutEffect, useLocalStorage, useMatchesMediaQuery, usePrefersReducedMotion, useScrollBehavior, useSessionStorage, useUndoRedo };

package/dist/hooks.js

@@ -1 +1 @@
-import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-Cjf2gfB8.js";import{t as n}from"./use-matches-media-query-CMSxHR9n.js";import{r}from"./browser-only-BSl_hruR.js";import{t as i}from"./use-copy-to-clipboard-BLpquU9d.js";import{n as a,t as o}from"./use-prefers-reduced-motion-CWIoFA6W.js";import{t as s}from"./in-view-C2DpZ6s0.js";import{useCallback as c,useEffect as l,useMemo as u,useReducer as d,useRef as f,useState as p,useSyncExternalStore as m}from"react";const h=[`2xl`,`xl`,`lg`,`md`,`sm`,`xs`,`2xs`],g=[`default`,...h];function _(){return m(j,M,()=>`default`)}function v(e){return m(P(e),I(e),()=>!1)}const y={"2xl":`(min-width: 96rem)`,xl:`(min-width: 80rem)`,lg:`(min-width: 64rem)`,md:`(min-width: 48rem)`,sm:`(min-width: 40rem)`,xs:`(min-width: 30rem)`,"2xs":`(min-width: 22.5rem)`},b={"2xl":`(max-width: 95.99rem)`,xl:`(max-width: 79.99rem)`,lg:`(max-width: 63.99rem)`,md:`(max-width: 47.99rem)`,sm:`(max-width: 39.99rem)`,xs:`(max-width: 29.99rem)`,"2xs":`(max-width: 22.49rem)`};let x=null,S=null;function C(){return x||={"2xl":window.matchMedia(y[`2xl`]),xl:window.matchMedia(y.xl),lg:window.matchMedia(y.lg),md:window.matchMedia(y.md),sm:window.matchMedia(y.sm),xs:window.matchMedia(y.xs),"2xs":window.matchMedia(y[`2xs`])},x}function w(e){return S||={"2xl":window.matchMedia(b[`2xl`]),xl:window.matchMedia(b.xl),lg:window.matchMedia(b.lg),md:window.matchMedia(b.md),sm:window.matchMedia(b.sm),xs:window.matchMedia(b.xs),"2xs":window.matchMedia(b[`2xs`])},S[e]}let T=`default`;const E=new Set;let D=!1;function O(){let e=C();for(let t of h)if(e[t].matches)return t;return`default`}let k=!1;function A(){k||(k=!0,requestAnimationFrame(()=>{k=!1;let e=O();if(e!==T){T=e;for(let e of E)e()}}))}function j(e){if(E.add(e),!D){D=!0;let e=C();T=O();for(let t of Object.values(e))t.addEventListener(`change`,A)}return e(),()=>{if(E.delete(e),E.size===0&&D){D=!1;let e=C();for(let t of Object.values(e))t.removeEventListener(`change`,A)}}}function M(){return T}const N=new Map;function P(e){let t=N.get(e);return t||(t=t=>{let n=w(e),r=!1,i=()=>{r||(r=!0,requestAnimationFrame(()=>{r=!1,t()}))};return n.addEventListener(`change`,i),()=>{n.removeEventListener(`change`,i)}},N.set(e,t),t)}const F=new Map;function I(e){let t=F.get(e);return t||(t=()=>w(e).matches,F.set(e,t),t)}function L(e){let t=f(e);return l(()=>{t.current=e}),u(()=>((...e)=>t.current?.(...e)),[])}function R(e,t){let n=L(e),r=f(0);return l(()=>()=>window.clearTimeout(r.current),[]),c((...e)=>{window.clearTimeout(r.current),r.current=window.setTimeout(()=>n(...e),t.waitMs)},[n,t.waitMs])}const z=(e=`mantle`)=>u(()=>B(e),[e]);function B(e=`mantle`){return[e.trim()||`mantle`,V()].join(`-`)}function V(){return Math.random().toString(36).substring(2,9)}function H(){let e=a();return u(()=>e?`auto`:`smooth`,[e])}function U(e,{root:t,margin:n,amount:r,once:i=!1,initial:a=!1}={}){let[o,c]=p(a);return l(()=>{if(!e.current||i&&o)return;function a(){return c(!0),i?void 0:()=>c(!1)}let l={root:t&&t.current||void 0,margin:n,amount:r};return s(e.current,a,l)},[t,e,n,i,r]),o}function W(e,t){switch(t.type){case`push`:return{undoStack:[...e.undoStack,t.snapshot],redoStack:[]};case`undo`:{if(e.undoStack.length===0)return e;let n=e.undoStack.slice(0,-1);return e.undoStack[e.undoStack.length-1]===void 0?e:{undoStack:n,redoStack:[...e.redoStack,t.current]}}case`redo`:{if(e.redoStack.length===0)return e;let n=e.redoStack.slice(0,-1);return e.redoStack[e.redoStack.length-1]===void 0?e:{undoStack:[...e.undoStack,t.current],redoStack:n}}}}function G(){let[e,t]=d(W,{undoStack:[],redoStack:[]}),n=c(e=>{t({type:`push`,snapshot:e})},[]),r=c(n=>{let r=e.undoStack[e.undoStack.length-1];if(r!==void 0)return t({type:`undo`,current:n}),r},[e.undoStack]),i=c(n=>{let r=e.redoStack[e.redoStack.length-1];if(r!==void 0)return t({type:`redo`,current:n}),r},[e.redoStack]);return u(()=>({canUndo:e.undoStack.length>0,canRedo:e.redoStack.length>0,push:n,undo:r,redo:i}),[e.undoStack.length,e.redoStack.length,n,r,i])}export{g as breakpoints,o as getPrefersReducedMotion,_ as useBreakpoint,L as useCallbackRef,t as useComposedRefs,i as useCopyToClipboard,R as useDebouncedCallback,U as useInView,v as useIsBelowBreakpoint,r as useIsHydrated,e as useIsomorphicLayoutEffect,n as useMatchesMediaQuery,a as usePrefersReducedMotion,z as useRandomStableId,H as useScrollBehavior,G as useUndoRedo};
+import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-Cjf2gfB8.js";import{t as n}from"./use-matches-media-query-CMSxHR9n.js";import{r}from"./browser-only-CPH56Xw_.js";import{t as i}from"./use-copy-to-clipboard-DqQ0_N3E.js";import{n as a,t as o}from"./use-prefers-reduced-motion-DBqNw1wB.js";import{t as s}from"./in-view-C2DpZ6s0.js";import{useCallback as c,useEffect as l,useMemo as u,useReducer as d,useRef as f,useState as p,useSyncExternalStore as m}from"react";const h=[`2xl`,`xl`,`lg`,`md`,`sm`,`xs`,`2xs`],g=[`default`,...h];function _(){return m(j,M,()=>`default`)}function v(e){return m(P(e),I(e),()=>!1)}const y={"2xl":`(min-width: 96rem)`,xl:`(min-width: 80rem)`,lg:`(min-width: 64rem)`,md:`(min-width: 48rem)`,sm:`(min-width: 40rem)`,xs:`(min-width: 30rem)`,"2xs":`(min-width: 22.5rem)`},b={"2xl":`(max-width: 95.99rem)`,xl:`(max-width: 79.99rem)`,lg:`(max-width: 63.99rem)`,md:`(max-width: 47.99rem)`,sm:`(max-width: 39.99rem)`,xs:`(max-width: 29.99rem)`,"2xs":`(max-width: 22.49rem)`};let x=null,S=null;function C(){return x||={"2xl":window.matchMedia(y[`2xl`]),xl:window.matchMedia(y.xl),lg:window.matchMedia(y.lg),md:window.matchMedia(y.md),sm:window.matchMedia(y.sm),xs:window.matchMedia(y.xs),"2xs":window.matchMedia(y[`2xs`])},x}function w(e){return S||={"2xl":window.matchMedia(b[`2xl`]),xl:window.matchMedia(b.xl),lg:window.matchMedia(b.lg),md:window.matchMedia(b.md),sm:window.matchMedia(b.sm),xs:window.matchMedia(b.xs),"2xs":window.matchMedia(b[`2xs`])},S[e]}let T=`default`;const E=new Set;let D=!1;function O(){let e=C();for(let t of h)if(e[t].matches)return t;return`default`}let k=!1;function A(){k||(k=!0,requestAnimationFrame(()=>{k=!1;let e=O();if(e!==T){T=e;for(let e of E)e()}}))}function j(e){if(E.add(e),!D){D=!0;let e=C();T=O();for(let t of Object.values(e))t.addEventListener(`change`,A)}return e(),()=>{if(E.delete(e),E.size===0&&D){D=!1;let e=C();for(let t of Object.values(e))t.removeEventListener(`change`,A)}}}function M(){return T}const N=new Map;function P(e){let t=N.get(e);return t||(t=t=>{let n=w(e),r=!1,i=()=>{r||(r=!0,requestAnimationFrame(()=>{r=!1,t()}))};return n.addEventListener(`change`,i),()=>{n.removeEventListener(`change`,i)}},N.set(e,t),t)}const F=new Map;function I(e){let t=F.get(e);return t||(t=()=>w(e).matches,F.set(e,t),t)}function L(e){let t=f(e);return l(()=>{t.current=e}),u(()=>((...e)=>t.current?.(...e)),[])}function R(e,t){let[n,r]=p(e);return l(()=>{let n=window.setTimeout(()=>{r(e)},t.waitMs);return()=>{window.clearTimeout(n)}},[e,t.waitMs]),n}function z(e,t){let n=L(e),r=f(0);return l(()=>()=>window.clearTimeout(r.current),[]),c((...e)=>{window.clearTimeout(r.current),r.current=window.setTimeout(()=>n(...e),t.waitMs)},[n,t.waitMs])}function B(e){return function(t){function n(n){let r=n.storageArea==null||n.storageArea===window.localStorage,i=n.key==null||n.key===e;r&&i&&t()}return window.addEventListener(`storage`,n),()=>{window.removeEventListener(`storage`,n)}}}function V(){return null}function H(e,t){try{let n=JSON.parse(e);return typeof n==`string`?n:t}catch{return t}}function U(e,t){let n=m(u(()=>B(e),[e]),()=>window.localStorage.getItem(e),V);return[n==null?t:H(n,t),c(t=>{let n=JSON.stringify(t);window.localStorage.setItem(e,n),window.dispatchEvent(new StorageEvent(`storage`,{key:e,newValue:n,storageArea:window.localStorage}))},[e])]}function W(e){return function(t){function n(n){let r=n.storageArea==null||n.storageArea===window.sessionStorage,i=n.key==null||n.key===e;r&&i&&t()}return window.addEventListener(`storage`,n),()=>{window.removeEventListener(`storage`,n)}}}function G(){return null}function K(e,t){try{let n=JSON.parse(e);return typeof n==`string`?n:t}catch{return t}}function q(e,t){let n=m(u(()=>W(e),[e]),()=>window.sessionStorage.getItem(e),G);return[n==null?t:K(n,t),c(t=>{let n=JSON.stringify(t);window.sessionStorage.setItem(e,n),window.dispatchEvent(new StorageEvent(`storage`,{key:e,newValue:n,storageArea:window.sessionStorage}))},[e])]}function J(){let e=a();return u(()=>e?`auto`:`smooth`,[e])}function Y(e,{root:t,margin:n,amount:r,once:i=!1,initial:a=!1}={}){let[o,c]=p(a);return l(()=>{if(!e.current||i&&o)return;function a(){return c(!0),i?void 0:()=>c(!1)}let l={root:t&&t.current||void 0,margin:n,amount:r};return s(e.current,a,l)},[t,e,n,i,r]),o}function X(){let e=f([]),t=f([]),[,n]=d(e=>e+1,0),r=c(r=>{e.current.push(r),t.current=[],n()},[]),i=c(r=>{let i=e.current[e.current.length-1];if(i!==void 0)return e.current.pop(),t.current.push(r),n(),i},[]),a=c(r=>{let i=t.current[t.current.length-1];if(i!==void 0)return t.current.pop(),e.current.push(r),n(),i},[]),o=e.current.length>0,s=t.current.length>0;return u(()=>({canUndo:o,canRedo:s,push:r,undo:i,redo:a}),[o,s,r,i,a])}export{g as breakpoints,o as getPrefersReducedMotion,_ as useBreakpoint,L as useCallbackRef,t as useComposedRefs,i as useCopyToClipboard,R as useDebounce,z as useDebouncedCallback,Y as useInView,v as useIsBelowBreakpoint,r as useIsHydrated,e as useIsomorphicLayoutEffect,U as useLocalStorage,n as useMatchesMediaQuery,a as usePrefersReducedMotion,J as useScrollBehavior,q as useSessionStorage,X as useUndoRedo};

package/dist/icons.js

@@ -1 +1 @@
-import{s as e}from"./theme-provider-BNFS3Acf.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{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};

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

@@ -14,13 +14,29 @@ declare function copyToClipboard(value: string): Promise<void>;
 //#region src/utils/compose-refs/compose-refs.d.ts
 type PossibleRef<T> = Ref<T> | undefined;
 /**
- * A utility to compose multiple refs together
- * Accepts callback refs and RefObject(s)
+ * A utility that composes multiple refs into a single callback ref. Accepts
+ * callback refs and RefObject(s); the returned ref writes the node to every
+ * given ref.
+ *
+ * Prefer {@link useComposedRefs} inside components — it keeps a stable
+ * function identity across renders.
+ *
+ * @example
+ * const setRefs = composeRefs(internalRef, forwardedRef);
+ * return <input ref={setRefs} />;
  */
 declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T | null) => void;
 /**
- * A custom hook that composes multiple refs
- * Accepts callback refs and RefObject(s)
+ * A custom hook that composes multiple refs into a single stable callback
+ * ref. Accepts callback refs and RefObject(s); the latest refs passed on
+ * each render are the ones written to.
+ *
+ * @example
+ * const MyInput = forwardRef<HTMLInputElement>((props, forwardedRef) => {
+ *   const internalRef = useRef<HTMLInputElement>(null);
+ *   const ref = useComposedRefs(internalRef, forwardedRef);
+ *   return <input ref={ref} {...props} />;
+ * });
  */
 declare function useComposedRefs<T>(...refs: PossibleRef<T>[]): (node: T | null) => void;
 //#endregion

package/dist/input-B3TS9yAP.js

@@ -0,0 +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};

package/dist/input.d.ts

@@ -1,52 +1,7 @@
 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 { 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;
 /**

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-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};

package/dist/label-PY0qM0G5.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/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-PY0qM0G5.js";
 export { Label };