{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mic-selector-demo",
  "registryDependencies": [
    "https://ui.elevenlabs.io/r/mic-selector.json",
    "https://ui.elevenlabs.io/r/live-waveform.json",
    "button",
    "card",
    "separator"
  ],
  "files": [
    {
      "path": "examples/mic-selector-demo.tsx",
      "content": "\"use client\"\n\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { Disc, Pause, Play, Trash2 } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { LiveWaveform } from \"@/components/ui/live-waveform\"\nimport { MicSelector } from \"@/components/ui/mic-selector\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype RecordingState = \"idle\" | \"loading\" | \"recording\" | \"recorded\" | \"playing\"\n\nexport default function MicSelectorDemo() {\n  const [selectedDevice, setSelectedDevice] = useState<string>(\"\")\n  const [isMuted, setIsMuted] = useState(false)\n  const [state, setState] = useState<RecordingState>(\"idle\")\n  const [audioBlob, setAudioBlob] = useState<Blob | null>(null)\n\n  const mediaRecorderRef = useRef<MediaRecorder | null>(null)\n  const audioChunksRef = useRef<Blob[]>([])\n  const audioElementRef = useRef<HTMLAudioElement | null>(null)\n\n  const startRecording = useCallback(async () => {\n    try {\n      setState(\"loading\")\n\n      const stream = await navigator.mediaDevices.getUserMedia({\n        audio: selectedDevice ? { deviceId: { exact: selectedDevice } } : true,\n      })\n\n      const mediaRecorder = new MediaRecorder(stream)\n      mediaRecorderRef.current = mediaRecorder\n      audioChunksRef.current = []\n\n      mediaRecorder.ondataavailable = (event) => {\n        if (event.data.size > 0) {\n          audioChunksRef.current.push(event.data)\n        }\n      }\n\n      mediaRecorder.onstop = () => {\n        const blob = new Blob(audioChunksRef.current, { type: \"audio/webm\" })\n        setAudioBlob(blob)\n        stream.getTracks().forEach((track) => track.stop())\n        setState(\"recorded\")\n      }\n\n      mediaRecorder.start()\n      setState(\"recording\")\n    } catch (error) {\n      console.error(\"Error starting recording:\", error)\n      setState(\"idle\")\n    }\n  }, [selectedDevice])\n\n  const stopRecording = useCallback(() => {\n    if (mediaRecorderRef.current && state === \"recording\") {\n      mediaRecorderRef.current.stop()\n    }\n  }, [state])\n\n  const playRecording = useCallback(() => {\n    if (!audioBlob) return\n\n    const audio = new Audio(URL.createObjectURL(audioBlob))\n    audioElementRef.current = audio\n\n    audio.onended = () => {\n      setState(\"recorded\")\n    }\n\n    audio.play()\n    setState(\"playing\")\n  }, [audioBlob])\n\n  const pausePlayback = useCallback(() => {\n    if (audioElementRef.current) {\n      audioElementRef.current.pause()\n      setState(\"recorded\")\n    }\n  }, [])\n\n  const restart = useCallback(() => {\n    if (audioElementRef.current) {\n      audioElementRef.current.pause()\n      audioElementRef.current = null\n    }\n    setAudioBlob(null)\n    audioChunksRef.current = []\n    setState(\"idle\")\n  }, [])\n\n  // Stop recording when muted\n  useEffect(() => {\n    if (isMuted && state === \"recording\") {\n      stopRecording()\n    }\n  }, [isMuted, state, stopRecording])\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      if (mediaRecorderRef.current) {\n        mediaRecorderRef.current.stop()\n      }\n      if (audioElementRef.current) {\n        audioElementRef.current.pause()\n      }\n    }\n  }, [])\n\n  const showWaveform = state === \"recording\" && !isMuted\n  const showProcessing = state === \"loading\" || state === \"playing\"\n  const showRecorded = state === \"recorded\"\n\n  return (\n    <div className=\"flex min-h-[200px] w-full items-center justify-center p-4\">\n      <Card className=\"m-0 w-full max-w-2xl border p-0 shadow-lg\">\n        <div className=\"flex w-full flex-wrap items-center justify-between gap-2 p-2\">\n          <div className=\"h-8 w-full min-w-0 flex-1 md:w-[200px] md:flex-none\">\n            <div\n              className={cn(\n                \"flex h-full items-center gap-2 rounded-md py-1\",\n                \"bg-foreground/5 text-foreground/70\"\n              )}\n            >\n              <div className=\"h-full min-w-0 flex-1\">\n                <div className=\"relative flex h-full w-full shrink-0 items-center justify-center overflow-hidden rounded-sm\">\n                  <LiveWaveform\n                    key={state}\n                    active={showWaveform}\n                    processing={showProcessing}\n                    deviceId={selectedDevice}\n                    barWidth={3}\n                    barGap={1}\n                    barRadius={4}\n                    fadeEdges={true}\n                    fadeWidth={24}\n                    sensitivity={1.8}\n                    smoothingTimeConstant={0.85}\n                    height={20}\n                    mode=\"scrolling\"\n                    className={cn(\n                      \"h-full w-full transition-opacity duration-300\",\n                      state === \"idle\" && \"opacity-0\"\n                    )}\n                  />\n                  {state === \"idle\" && (\n                    <div className=\"absolute inset-0 flex items-center justify-center\">\n                      <span className=\"text-foreground/50 text-xs font-medium\">\n                        Start Recording\n                      </span>\n                    </div>\n                  )}\n                  {showRecorded && (\n                    <div className=\"absolute inset-0 flex items-center justify-center\">\n                      <span className=\"text-foreground/50 text-xs font-medium\">\n                        Ready to Play\n                      </span>\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n          <div className=\"flex w-full flex-wrap items-center justify-center gap-1 md:w-auto\">\n            <MicSelector\n              value={selectedDevice}\n              onValueChange={setSelectedDevice}\n              muted={isMuted}\n              onMutedChange={setIsMuted}\n              disabled={state === \"recording\" || state === \"loading\"}\n            />\n            <Separator orientation=\"vertical\" className=\"mx-1 -my-2.5\" />\n            <div className=\"flex\">\n              {state === \"idle\" && (\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  onClick={startRecording}\n                  disabled={isMuted}\n                  aria-label=\"Start recording\"\n                >\n                  <Disc className=\"size-5\" />\n                </Button>\n              )}\n              {(state === \"loading\" || state === \"recording\") && (\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  onClick={stopRecording}\n                  disabled={state === \"loading\"}\n                  aria-label=\"Stop recording\"\n                >\n                  <Pause className=\"size-5\" />\n                </Button>\n              )}\n              {showRecorded && (\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  onClick={playRecording}\n                  aria-label=\"Play recording\"\n                >\n                  <Play className=\"size-5\" />\n                </Button>\n              )}\n              {state === \"playing\" && (\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  onClick={pausePlayback}\n                  aria-label=\"Pause playback\"\n                >\n                  <Pause className=\"size-5\" />\n                </Button>\n              )}\n              <Separator orientation=\"vertical\" className=\"mx-1 -my-2.5\" />\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                onClick={restart}\n                disabled={\n                  state === \"idle\" ||\n                  state === \"loading\" ||\n                  state === \"recording\"\n                }\n                aria-label=\"Delete recording\"\n              >\n                <Trash2 className=\"size-5\" />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}