{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"voice-input","type":"registry:component","title":"Voice input","description":"Dictate a prompt: a waveform from your real mic level, a timer, then transcribing.","author":"Hairline UI","dependencies":["lucide-react"],"registryDependencies":["https://hairlineui.com/r/number-roll.json","https://hairlineui.com/r/text-morph.json"],"files":[{"path":"registry/voice-input.tsx","type":"registry:component","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { Mic, MicOff, RotateCcw, Square, X } from \"lucide-react\";\nimport { NumberRoll } from \"./number-roll\";\nimport { TextMorph } from \"./text-morph\";\n\n/* ─────────────────────────────────────────────────────────\n * VOICE INPUT: dictating a prompt\n *\n * idle a mic button\n * listening the button stretches into a bar: the mic blurs\n * into Stop, a waveform drawn from your mic level,\n * a timer whose seconds roll, and Cancel; the live\n * transcript opens above\n * transcribing the waveform settles flat as \"Transcribing\"\n * rises over it and Stop becomes a spinner; then\n * the bar shrinks back into the mic\n * blocked the browser denied the microphone; the mic blurs\n * into a crossed-out one and how to fix it opens in\n * error it didn't catch that; try again\n *\n * One surface throughout: give it the width the bar should fill\n * and the mic stretches across it from its own side (align=\"end\"\n * for a mic beside Send, so it grows leftwards). Your recording\n * code owns the mic: pass\n * status and the current level (0 to 1). Without a level the\n * bars move in a gentle wave.\n * ───────────────────────────────────────────────────────── */\n\nexport type VoiceStatus = \"idle\" | \"listening\" | \"transcribing\" | \"blocked\" | \"error\";\n\nexport interface VoiceInputProps extends React.HTMLAttributes {\n status: VoiceStatus;\n /** Current microphone level, 0 to 1. */\n level?: number;\n /** The words recognised so far. */\n transcript?: string;\n /** When listening started (ms); shows a timer. */\n startedAt?: number;\n onStart?: () => void;\n onStop?: () => void;\n onCancel?: () => void;\n errorText?: string;\n /** Which side the mic sits on; the bar grows from there. \"end\" suits a mic beside Send. */\n align?: \"start\" | \"end\";\n}\n\nconst FOCUS = \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40\";\nconst BARS = 28;\nconst MORPH = \"cubic-bezier(0.16,1,0.3,1)\";\n// A light that sweeps across the label. A mask, not a text clip, so it reaches letters that are mid-morph.\nconst SHEEN =\n \"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\";\nconst TWO_DIGITS = { minimumIntegerDigits: 2 };\n\nconst reducedQuery = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduced = (onChange: () => void) => {\n const query = window.matchMedia(reducedQuery);\n query.addEventListener(\"change\", onChange);\n return () => query.removeEventListener(\"change\", onChange);\n};\nconst useReducedMotion = () =>\n React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false);\n\n/** Icons trade places through a blur: the old one shrinks away as the new one grows in. */\nconst swap = (on: boolean, reduced: boolean): React.CSSProperties => ({\n opacity: on ? 1 : 0,\n transform: on ? \"none\" : \"scale(0.6)\",\n filter: on ? \"none\" : \"blur(3px)\",\n transition: reduced ? \"none\" : `opacity 260ms ${MORPH}, transform 380ms ${MORPH}, filter 260ms ${MORPH}`,\n});\n\n/** Content that fades in once its surface has made room, and out before it closes. */\nconst appear = (on: boolean, reduced: boolean): React.CSSProperties => ({\n opacity: on ? 1 : 0,\n filter: on ? \"none\" : \"blur(4px)\",\n transition: reduced ? \"none\" : on ? `opacity 320ms ${MORPH} 140ms, filter 320ms ${MORPH} 140ms` : `opacity 140ms ease-out, filter 140ms ease-out`,\n});\n\nexport function VoiceInput({\n status,\n level,\n transcript,\n startedAt,\n onStart,\n onStop,\n onCancel,\n errorText,\n align = \"start\",\n className = \"\",\n ...props\n}: VoiceInputProps) {\n const end = align === \"end\";\n const reduced = useReducedMotion();\n const listening = status === \"listening\";\n const transcribing = status === \"transcribing\";\n const wide = listening || transcribing;\n const alert = status === \"blocked\" || status === \"error\";\n const blocked = status === \"blocked\";\n const [history, setHistory] = React.useState(() => Array(BARS).fill(0));\n const [now, setNow] = React.useState(startedAt ?? 0);\n const [lastTranscript, setLastTranscript] = React.useState(transcript);\n if (transcript && transcript !== lastTranscript) setLastTranscript(transcript);\n\n // Keep a short history of levels so the waveform scrolls.\n React.useEffect(() => {\n if (!listening || level === undefined) return;\n setHistory((h) => [...h.slice(1), Math.min(1, Math.max(0, level))]);\n }, [level, listening]);\n\n // The timer re-renders on each whole second, not every frame.\n React.useEffect(() => {\n if (!listening) {\n setHistory(Array(BARS).fill(0));\n return;\n }\n if (startedAt === undefined) return;\n let timer = 0;\n const tick = () => {\n const t = Date.now();\n setNow(t);\n timer = window.setTimeout(tick, 1000 - ((t - startedAt) % 1000) + 5);\n };\n tick();\n return () => window.clearTimeout(timer);\n }, [listening, startedAt]);\n\n const seconds = startedAt === undefined ? 0 : Math.max(0, Math.floor((now - startedAt) / 1000));\n const icon = status === \"idle\" ? \"mic\" : listening ? \"stop\" : transcribing ? \"spin\" : \"off\";\n const press = status === \"idle\" ? onStart : listening ? onStop : undefined;\n const showTranscript = listening && Boolean(transcript);\n\n return (\n
\n {/* The words so far open above the bar, and fold away with it. */}\n \n
\n

\n {transcript ?? lastTranscript}\n

\n
\n
\n\n
\n {/* The one surface: a mic button that stretches into the listening bar and shrinks back. */}\n \n press?.()}\n className={`relative flex size-8 shrink-0 items-center justify-center rounded-full transition-[background-color,color,transform] duration-300 ${FOCUS} ${\n listening\n ? \"bg-primary text-primary-foreground active:scale-95\"\n : alert\n ? \"cursor-default bg-muted text-muted-foreground\"\n : transcribing\n ? \"cursor-default text-muted-foreground\"\n : \"text-muted-foreground hover:bg-accent hover:text-foreground\"\n }`}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n {/* The waveform while listening; it settles flat as \"Transcribing\" rises over it. */}\n \n \n {history.map((v, i) =>\n level === undefined ? (\n \n ) : (\n \n )\n )}\n \n \n {transcribing ? \"Transcribing\" : \"Listening\"}\n \n \n\n {startedAt !== undefined && (\n \n :\n \n \n )}\n {onCancel && (\n \n \n \n )}\n
\n\n {/* Blocked or not heard: the reason and the way back open beside the same circle. */}\n