{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-audio-player",
  "title": "AI: Audio Player",
  "description": "Accessible audio transport controls, time and volume using Media Chrome.",
  "dependencies": [
    "media-chrome@^4.19.3"
  ],
  "registryDependencies": [
    "@nx-ui/utils",
    "@nx-ui/button",
    "@nx-ui/button-group"
  ],
  "files": [
    {
      "path": "components/ai/audio-player.tsx",
      "content": "// Ported from vercel/ai-elements@6a9d5b1822ffb10bba4bd97175f01edd7d8651cd.\n\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/components/ui/button-group\";\nimport { cn } from \"@/lib/utils\";\ntype SpeechResult = { audio: { mediaType: string; base64: string } };\nimport {\n  MediaControlBar,\n  MediaController,\n  MediaDurationDisplay,\n  MediaMuteButton,\n  MediaPlayButton,\n  MediaSeekBackwardButton,\n  MediaSeekForwardButton,\n  MediaTimeDisplay,\n  MediaTimeRange,\n  MediaVolumeRange,\n} from \"media-chrome/react\";\nimport type { ComponentProps, CSSProperties } from \"react\";\n\nexport type AudioPlayerProps = Omit<\n  ComponentProps<typeof MediaController>,\n  \"audio\"\n>;\n\nexport const AudioPlayer = ({\n  children,\n  className,\n  style,\n  ...props\n}: AudioPlayerProps) => (\n  <MediaController\n    audio\n    className={cn(\"w-full min-w-0\", className)}\n    aria-label=\"Audio player\"\n    data-slot=\"audio-player\"\n    style={\n      {\n        \"--media-background-color\": \"transparent\",\n        \"--media-button-icon-height\": \"1rem\",\n        \"--media-button-icon-width\": \"1rem\",\n        \"--media-control-background\": \"transparent\",\n        \"--media-control-hover-background\": \"var(--color-accent)\",\n        \"--media-control-padding\": \"0\",\n        \"--media-font\": \"var(--font-sans)\",\n        \"--media-font-size\": \"10px\",\n        \"--media-icon-color\": \"currentColor\",\n        \"--media-preview-time-background\": \"var(--color-background)\",\n        \"--media-preview-time-border-radius\": \"var(--radius-md)\",\n        \"--media-preview-time-text-shadow\": \"none\",\n        \"--media-primary-color\": \"var(--color-primary)\",\n        \"--media-range-bar-color\": \"var(--color-primary)\",\n        \"--media-range-track-background\": \"var(--color-secondary)\",\n        \"--media-secondary-color\": \"var(--color-secondary)\",\n        \"--media-text-color\": \"var(--color-foreground)\",\n        \"--media-tooltip-arrow-display\": \"none\",\n        \"--media-tooltip-background\": \"var(--color-background)\",\n        \"--media-tooltip-border-radius\": \"var(--radius-md)\",\n        ...style,\n      } as CSSProperties\n    }\n    {...props}\n  >\n    {children}\n  </MediaController>\n);\n\nexport type AudioPlayerElementProps = Omit<ComponentProps<\"audio\">, \"src\"> &\n  (\n    | {\n        data: SpeechResult[\"audio\"];\n      }\n    | {\n        src: string;\n      }\n  );\n\nexport const AudioPlayerElement = ({ ...props }: AudioPlayerElementProps) => (\n  // oxlint-disable-next-line eslint-plugin-jsx-a11y(media-has-caption) -- audio player captions are provided by consumer\n  <audio\n    data-slot=\"audio-player-element\"\n    slot=\"media\"\n    tabIndex={-1}\n    src={\n      \"src\" in props\n        ? props.src\n        : `data:${props.data.mediaType};base64,${props.data.base64}`\n    }\n    {...props}\n  />\n);\n\nexport type AudioPlayerControlBarProps = ComponentProps<typeof MediaControlBar>;\n\nexport const AudioPlayerControlBar = ({\n  children,\n  className,\n  ...props\n}: AudioPlayerControlBarProps) => (\n  <MediaControlBar className={cn(\"w-full min-w-0\", className)} data-slot=\"audio-player-control-bar\" {...props}>\n    <ButtonGroup className=\"w-full min-w-0 flex-wrap\" orientation=\"horizontal\">{children}</ButtonGroup>\n  </MediaControlBar>\n);\n\nexport type AudioPlayerPlayButtonProps = ComponentProps<typeof MediaPlayButton>;\n\nexport const AudioPlayerPlayButton = ({\n  className,\n  ...props\n}: AudioPlayerPlayButtonProps) => (\n  <Button nativeButton={false} size=\"icon-sm\" variant=\"outline\" render={\n    <MediaPlayButton\n      className={cn(\"bg-transparent\", className)}\n      data-slot=\"audio-player-play-button\"\n      {...props}\n    />\n  } />\n);\n\nexport type AudioPlayerSeekBackwardButtonProps = ComponentProps<\n  typeof MediaSeekBackwardButton\n>;\n\nexport const AudioPlayerSeekBackwardButton = ({\n  seekOffset = 10,\n  ...props\n}: AudioPlayerSeekBackwardButtonProps) => (\n  <Button nativeButton={false} size=\"icon-sm\" variant=\"outline\" render={\n    <MediaSeekBackwardButton\n      data-slot=\"audio-player-seek-backward-button\"\n      seekOffset={seekOffset}\n      {...props}\n    />\n  } />\n);\n\nexport type AudioPlayerSeekForwardButtonProps = ComponentProps<\n  typeof MediaSeekForwardButton\n>;\n\nexport const AudioPlayerSeekForwardButton = ({\n  seekOffset = 10,\n  ...props\n}: AudioPlayerSeekForwardButtonProps) => (\n  <Button nativeButton={false} size=\"icon-sm\" variant=\"outline\" render={\n    <MediaSeekForwardButton\n      data-slot=\"audio-player-seek-forward-button\"\n      seekOffset={seekOffset}\n      {...props}\n    />\n  } />\n);\n\nexport type AudioPlayerTimeDisplayProps = ComponentProps<\n  typeof MediaTimeDisplay\n>;\n\nexport const AudioPlayerTimeDisplay = ({\n  className,\n  ...props\n}: AudioPlayerTimeDisplayProps) => (\n  <ButtonGroupText className=\"bg-transparent\" render={\n    <MediaTimeDisplay\n      className={cn(\"tabular-nums\", className)}\n      data-slot=\"audio-player-time-display\"\n      {...props}\n    />\n  } />\n);\n\nexport type AudioPlayerTimeRangeProps = ComponentProps<typeof MediaTimeRange>;\n\nexport const AudioPlayerTimeRange = ({\n  className,\n  ...props\n}: AudioPlayerTimeRangeProps) => (\n  <ButtonGroupText className=\"min-w-24 flex-1 bg-transparent\" render={\n    <MediaTimeRange\n      className={cn(\"min-w-0\", className)}\n      data-slot=\"audio-player-time-range\"\n      {...props}\n    />\n  } />\n);\n\nexport type AudioPlayerDurationDisplayProps = ComponentProps<\n  typeof MediaDurationDisplay\n>;\n\nexport const AudioPlayerDurationDisplay = ({\n  className,\n  ...props\n}: AudioPlayerDurationDisplayProps) => (\n  <ButtonGroupText className=\"bg-transparent\" render={\n    <MediaDurationDisplay\n      className={cn(\"tabular-nums\", className)}\n      data-slot=\"audio-player-duration-display\"\n      {...props}\n    />\n  } />\n);\n\nexport type AudioPlayerMuteButtonProps = ComponentProps<typeof MediaMuteButton>;\n\nexport const AudioPlayerMuteButton = ({\n  className,\n  ...props\n}: AudioPlayerMuteButtonProps) => (\n  <ButtonGroupText className=\"bg-transparent\" render={\n    <MediaMuteButton\n      className={cn(\"\", className)}\n      data-slot=\"audio-player-mute-button\"\n      {...props}\n    />\n  } />\n);\n\nexport type AudioPlayerVolumeRangeProps = ComponentProps<\n  typeof MediaVolumeRange\n>;\n\nexport const AudioPlayerVolumeRange = ({\n  className,\n  ...props\n}: AudioPlayerVolumeRangeProps) => (\n  <ButtonGroupText className=\"bg-transparent\" render={\n    <MediaVolumeRange\n      className={cn(\"\", className)}\n      data-slot=\"audio-player-volume-range\"\n      {...props}\n    />\n  } />\n);\n",
      "type": "registry:ui",
      "target": "components/ai/audio-player.tsx"
    }
  ],
  "type": "registry:ui"
}