{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "audio-player",
  "type": "registry:ui",
  "title": "Audio player",
  "description": "Minimal React audio player row with a play and pause toggle, title, subtitle and an accessible progress bar. Controlled, so it works with any audio source.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/icon-button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/audio-player.tsx",
      "type": "registry:ui",
      "target": "components/ui/audio-player.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { PauseIcon, PlayIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { IconButton } from \"@/components/ui/icon-button\"\n\nfunction AudioPlayer({\n  title,\n  subtitle,\n  playing,\n  onToggle,\n  progress = 0,\n  className,\n}: {\n  title: string\n  subtitle?: string\n  playing?: boolean\n  onToggle?: () => void\n  progress?: number\n  className?: string\n}) {\n  return (\n    <div\n      data-slot=\"audio-player\"\n      className={cn(\n        \"flex items-center gap-3 rounded-xl border border-border bg-surface px-3 py-2.5\",\n        className\n      )}\n    >\n      <IconButton type=\"button\" variant=\"outline\" size=\"icon\" aria-label={playing ? \"Pause\" : \"Play\"} onClick={onToggle}>\n        {playing ? <PauseIcon /> : <PlayIcon />}\n      </IconButton>\n      <div className=\"min-w-0 flex-1\">\n        <p className=\"truncate text-sm font-medium text-fg\">{title}</p>\n        {subtitle ? <p className=\"truncate text-xs text-fg-muted\">{subtitle}</p> : null}\n        <div className=\"mt-1.5 h-1 overflow-hidden rounded-full bg-sunken\" role=\"progressbar\" aria-valuenow={progress} aria-valuemin={0} aria-valuemax={100} aria-label=\"Audio progress\">\n          <div className=\"h-full bg-accent\" style={{ width: `${progress}%` }} />\n        </div>\n      </div>\n    </div>\n  )\n}\nexport { AudioPlayer }\n"
    }
  ]
}