50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 52:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T360f,// Hairline UI · voice-input · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { Mic, MicOff, RotateCcw, Square, X } from "lucide-react"; import { NumberRoll } from "./number-roll"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * VOICE INPUT: dictating a prompt * * idle a mic button * listening the button stretches into a bar: the mic blurs * into Stop, a waveform drawn from your mic level, * a timer whose seconds roll, and Cancel; the live * transcript opens above * transcribing the waveform settles flat as "Transcribing" * rises over it and Stop becomes a spinner; then * the bar shrinks back into the mic * blocked the browser denied the microphone; the mic blurs * into a crossed-out one and how to fix it opens in * error it didn't catch that; try again * * One surface throughout: give it the width the bar should fill * and the mic stretches across it from its own side (align="end" * for a mic beside Send, so it grows leftwards). Your recording * code owns the mic: pass * status and the current level (0 to 1). Without a level the * bars move in a gentle wave. * ───────────────────────────────────────────────────────── */ export type VoiceStatus = "idle" | "listening" | "transcribing" | "blocked" | "error"; export interface VoiceInputProps extends React.HTMLAttributes { status: VoiceStatus; /** Current microphone level, 0 to 1. */ level?: number; /** The words recognised so far. */ transcript?: string; /** When listening started (ms); shows a timer. */ startedAt?: number; onStart?: () => void; onStop?: () => void; onCancel?: () => void; errorText?: string; /** Which side the mic sits on; the bar grows from there. "end" suits a mic beside Send. */ align?: "start" | "end"; } const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const BARS = 28; const MORPH = "cubic-bezier(0.16,1,0.3,1)"; // A light that sweeps across the label. A mask, not a text clip, so it reaches letters that are mid-morph. const SHEEN = "text-foreground [mask-image:linear-gradient(90deg,rgb(0_0_0/0.45)_35%,#000_50%,rgb(0_0_0/0.45)_65%)] [mask-size:200%_100%] animate-[ui-sheen_1.4s_linear_infinite] motion-reduce:animate-none motion-reduce:[mask-image:none] motion-reduce:text-foreground/70"; const TWO_DIGITS = { minimumIntegerDigits: 2 }; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); /** Icons trade places through a blur: the old one shrinks away as the new one grows in. */ const swap = (on: boolean, reduced: boolean): React.CSSProperties => ({ opacity: on ? 1 : 0, transform: on ? "none" : "scale(0.6)", filter: on ? "none" : "blur(3px)", transition: reduced ? "none" : `opacity 260ms ${MORPH}, transform 380ms ${MORPH}, filter 260ms ${MORPH}`, }); /** Content that fades in once its surface has made room, and out before it closes. */ const appear = (on: boolean, reduced: boolean): React.CSSProperties => ({ opacity: on ? 1 : 0, filter: on ? "none" : "blur(4px)", transition: reduced ? "none" : on ? `opacity 320ms ${MORPH} 140ms, filter 320ms ${MORPH} 140ms` : `opacity 140ms ease-out, filter 140ms ease-out`, }); export function VoiceInput({ status, level, transcript, startedAt, onStart, onStop, onCancel, errorText, align = "start", className = "", ...props }: VoiceInputProps) { const end = align === "end"; const reduced = useReducedMotion(); const listening = status === "listening"; const transcribing = status === "transcribing"; const wide = listening || transcribing; const alert = status === "blocked" || status === "error"; const blocked = status === "blocked"; const [history, setHistory] = React.useState(() => Array(BARS).fill(0)); const [now, setNow] = React.useState(startedAt ?? 0); const [lastTranscript, setLastTranscript] = React.useState(transcript); if (transcript && transcript !== lastTranscript) setLastTranscript(transcript); // Keep a short history of levels so the waveform scrolls. React.useEffect(() => { if (!listening || level === undefined) return; setHistory((h) => [...h.slice(1), Math.min(1, Math.max(0, level))]); }, [level, listening]); // The timer re-renders on each whole second, not every frame. React.useEffect(() => { if (!listening) { setHistory(Array(BARS).fill(0)); return; } if (startedAt === undefined) return; let timer = 0; const tick = () => { const t = Date.now(); setNow(t); timer = window.setTimeout(tick, 1000 - ((t - startedAt) % 1000) + 5); }; tick(); return () => window.clearTimeout(timer); }, [listening, startedAt]); const seconds = startedAt === undefined ? 0 : Math.max(0, Math.floor((now - startedAt) / 1000)); const icon = status === "idle" ? "mic" : listening ? "stop" : transcribing ? "spin" : "off"; const press = status === "idle" ? onStart : listening ? onStop : undefined; const showTranscript = listening && Boolean(transcript); return (

{/* The words so far open above the bar, and fold away with it. */}

{transcript ?? lastTranscript}

{/* The one surface: a mic button that stretches into the listening bar and shrinks back. */}

{/* The waveform while listening; it settles flat as "Transcribing" rises over it. */} {history.map((v, i) => level === undefined ? ( ) : ( ) )} {startedAt !== undefined && ( )} {onCancel && ( )}

{/* Blocked or not heard: the reason and the way back open beside the same circle. */}

{listening ? "Listening" : transcribing ? "Transcribing" : ""}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-sheen {\n\tfrom {\n\t\tmask-position: 150% 0;\n\t}\n\tto {\n\t\tmask-position: -50% 0;\n\t}\n}\n\n@keyframes ui-wave {\n\t0%, 100% {\n\t\ttransform: scaleY(0.35);\n\t}\n\t50% {\n\t\ttransform: scaleY(1);\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/voice-input.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]