Audio Player

• Autonomous — pass src and the component renders a hidden <audio>, tracks time via native events, and lets you seek by clicking the progress bar / waveform.
• Controlled — pass playing, progress, currentTime, duration and handle onPlayPauseToggle, onSeek. Useful for demos with no real audio, or when you orchestrate playback from a global store.
• Hybrid — pass src and selectively override any display prop. The override wins.

tracks accepts { id, title, duration?, src? }. Selecting a track swaps the source automatically. defaultActiveTrackId = uncontrolled, activeTrackId = controlled.

<AudioPlayer
  variant="playlist"
  defaultActiveTrackId={1}
  tracks={[
    { id: 1, title: "Intro", src: "/audio/01.mp3", duration: "0:42" },
    { id: 2, title: "Body", src: "/audio/02.mp3", duration: "3:18" },
  ]}
  onSelectTrack={(id) => analytics.track("track-changed", { id })}
/>

Every Diamond component shares the same prop conventions, so once you learn one you can predict the others.

• variant — discriminated union of every visual option. Categories shown above are docs-only metadata; the prop is a flat string union.
• accent — any CSS color string. Overrides --diamond-accent just for that instance via inline style. Cascades into hover, ring, and selection states.
• asChild (when present) — renders the underlying primitive via @radix-ui/react-slot, letting you compose with <Link>, motion.button, etc.
• className — merged with internal Tailwind classes via cn(). Use it to override layout, spacing, or colors.
• Native HTML attributes (onClick, aria-*, data-*, ref, etc.) flow through to the root element without any whitelist.
• Diamond is the skin: zero domain state, zero fetch, zero providers. You wire data and reactions in your app code; the components just render and emit events.