{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"audio-viewer","type":"registry:ui","title":"AudioViewer","description":"Themed card around the native audio player.","package":"react-fancy","dependencies":[],"registryDependencies":[],"files":[{"path":"components\/fancy\/audio-viewer\/AudioViewer.tsx","content":"import { forwardRef, useState } from \"react\";\nimport { cn } from \"..\/..\/utils\/cn\";\nimport type { AudioViewerProps } from \".\/AudioViewer.types\";\n\n\/**\n * A standalone audio viewer \u2014 a themed card wrapping the native audio player,\n * with an optional title. Renders for audio sources inside `<MediaViewer>`.\n *\n * ```tsx\n * <AudioViewer src=\"\/track.mp3\" title=\"track.mp3\" \/>\n * ```\n *\/\nexport const AudioViewer = forwardRef<HTMLDivElement, AudioViewerProps>(\n  (\n    {\n      src,\n      title,\n      controls = true,\n      autoPlay = false,\n      loop = false,\n      onError,\n      className,\n      style,\n    },\n    ref,\n  ) => {\n    const [errored, setErrored] = useState(false);\n\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-audio-viewer=\"\"\n        className={cn(\n          \"flex flex-col gap-2 rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900\",\n          className,\n        )}\n        style={style}\n      >\n        {title && (\n          <div className=\"truncate text-sm font-medium text-zinc-700 dark:text-zinc-200\">\n            {title}\n          <\/div>\n        )}\n        {errored ? (\n          <div className=\"text-sm text-zinc-500 dark:text-zinc-400\">\n            Couldn&apos;t load audio.\n          <\/div>\n        ) : (\n          <audio\n            src={src}\n            controls={controls}\n            autoPlay={autoPlay}\n            loop={loop}\n            onError={() => {\n              setErrored(true);\n              onError?.();\n            }}\n            className=\"w-full\"\n          \/>\n        )}\n      <\/div>\n    );\n  },\n);\n\nAudioViewer.displayName = \"AudioViewer\";\n","type":"registry:ui","target":"components\/fancy\/audio-viewer\/AudioViewer.tsx"},{"path":"components\/fancy\/audio-viewer\/AudioViewer.types.ts","content":"import type { CSSProperties } from \"react\";\n\nexport interface AudioViewerProps {\n  \/** Audio source \u2014 an `http(s):`, `data:`, or `blob:` URL. *\/\n  src: string;\n  \/** Optional label shown above the player (e.g. the file name). *\/\n  title?: string;\n  \/** Show native playback controls (default `true`). *\/\n  controls?: boolean;\n  \/** Autoplay on mount. *\/\n  autoPlay?: boolean;\n  \/** Loop playback (default `false`). *\/\n  loop?: boolean;\n  \/** Fired when the audio fails to load. *\/\n  onError?: () => void;\n  \/** Additional CSS classes for the card. *\/\n  className?: string;\n  \/** Inline styles for the card. *\/\n  style?: CSSProperties;\n}\n","type":"registry:ui","target":"components\/fancy\/audio-viewer\/AudioViewer.types.ts"},{"path":"components\/fancy\/audio-viewer\/index.ts","content":"export { AudioViewer } from \".\/AudioViewer\";\nexport type { AudioViewerProps } from \".\/AudioViewer.types\";\n","type":"registry:ui","target":"components\/fancy\/audio-viewer\/index.ts"}]}