{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "music-player-01",
	"title": "Music Player 01",
	"type": "registry:block",
	"description": "A music player with a scrollable song list and play/pause, progress, time, and duration controls.",
	"devDependencies": [
		"@lucide/svelte@^1.7.0"
	],
	"registryDependencies": [
		"https://sv11.ui.twango.dev/r/audio-player.json",
		"button",
		"card",
		"scroll-area"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { AudioPlayer, exampleTracks } from \"$UI$/audio-player/index.js\";\n\timport { Card } from \"$UI$/card/index.js\";\n\timport { ScrollArea } from \"$UI$/scroll-area/index.js\";\n\timport MusicPlayer01Player from \"./music-player-01-player.svelte\";\n\timport MusicPlayer01Song from \"./music-player-01-song.svelte\";\n</script>\n\n<AudioPlayer>\n\t<Card class=\"mx-auto w-full overflow-hidden p-0\">\n\t\t<div class=\"flex flex-col lg:h-[180px] lg:flex-row\">\n\t\t\t<div class=\"bg-muted/50 flex flex-col overflow-hidden lg:h-full lg:w-64\">\n\t\t\t\t<ScrollArea class=\"h-48 w-full lg:h-full\">\n\t\t\t\t\t<div class=\"space-y-1 p-3\">\n\t\t\t\t\t\t{#each exampleTracks as song, index (song.id)}\n\t\t\t\t\t\t\t<MusicPlayer01Song {song} trackNumber={index + 1} />\n\t\t\t\t\t\t{/each}\n\t\t\t\t\t</div>\n\t\t\t\t</ScrollArea>\n\t\t\t</div>\n\t\t\t<MusicPlayer01Player />\n\t\t</div>\n\t</Card>\n</AudioPlayer>\n",
			"type": "registry:block",
			"target": "components/blocks/music-player-01/music-player-01.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport {\n\t\tAudioPlayerButton,\n\t\tAudioPlayerDuration,\n\t\tAudioPlayerProgress,\n\t\tAudioPlayerTime,\n\t\tuseAudioPlayer,\n\t} from \"$UI$/audio-player/index.js\";\n\n\ttype Track = { id: string; name: string; url: string };\n\n\tconst player = useAudioPlayer<Track>();\n</script>\n\n<div class=\"flex flex-1 items-center p-4 sm:p-6\">\n\t<div class=\"mx-auto w-full max-w-2xl\">\n\t\t<div class=\"mb-4\">\n\t\t\t<h3 class=\"text-base font-semibold sm:text-lg\">\n\t\t\t\t{player.activeItem?.data?.name ?? \"No track selected\"}\n\t\t\t</h3>\n\t\t</div>\n\t\t<div class=\"flex items-center gap-3 sm:gap-4\">\n\t\t\t<AudioPlayerButton\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tsize=\"default\"\n\t\t\t\tclass=\"h-12 w-12 shrink-0 sm:h-10 sm:w-10\"\n\t\t\t\tdisabled={!player.activeItem}\n\t\t\t/>\n\t\t\t<div class=\"flex flex-1 items-center gap-2 sm:gap-3\">\n\t\t\t\t<AudioPlayerTime class=\"text-xs tabular-nums\" />\n\t\t\t\t<AudioPlayerProgress class=\"flex-1\" />\n\t\t\t\t<AudioPlayerDuration class=\"text-xs tabular-nums\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n",
			"type": "registry:block",
			"target": "components/blocks/music-player-01/music-player-01-player.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport PauseIcon from \"@lucide/svelte/icons/pause\";\n\timport PlayIcon from \"@lucide/svelte/icons/play\";\n\timport { Button } from \"$UI$/button/index.js\";\n\timport { useAudioPlayer } from \"$UI$/audio-player/index.js\";\n\timport { cn } from \"$UTILS$.js\";\n\n\ttype Track = { id: string; name: string; url: string };\n\n\tlet { song, trackNumber }: { song: Track; trackNumber: number } = $props();\n\n\tconst player = useAudioPlayer<Track>();\n\tconst isActive = $derived(player.isItemActive(song.id));\n\tconst isCurrentlyPlaying = $derived(isActive && player.isPlaying);\n</script>\n\n<div class=\"group/song relative\">\n\t<Button\n\t\tvariant={isActive ? \"secondary\" : \"ghost\"}\n\t\tsize=\"sm\"\n\t\tclass={cn(\n\t\t\t\"h-10 w-full justify-start px-3 font-normal sm:h-9 sm:px-2\",\n\t\t\tisActive && \"bg-secondary\"\n\t\t)}\n\t\tonclick={() => {\n\t\t\tif (isCurrentlyPlaying) {\n\t\t\t\tvoid player.pause();\n\t\t\t} else {\n\t\t\t\tvoid player.play({ id: song.id, src: song.url, data: song });\n\t\t\t}\n\t\t}}\n\t>\n\t\t<div class=\"flex w-full items-center gap-3\">\n\t\t\t<div class=\"flex w-5 shrink-0 items-center justify-center\">\n\t\t\t\t{#if isCurrentlyPlaying}\n\t\t\t\t\t<PauseIcon class=\"h-4 w-4 sm:h-3.5 sm:w-3.5\" />\n\t\t\t\t{:else}\n\t\t\t\t\t<span class=\"text-muted-foreground/60 text-sm tabular-nums group-hover/song:invisible\">\n\t\t\t\t\t\t{trackNumber}\n\t\t\t\t\t</span>\n\t\t\t\t\t<PlayIcon class=\"invisible absolute h-4 w-4 group-hover/song:visible sm:h-3.5 sm:w-3.5\" />\n\t\t\t\t{/if}\n\t\t\t</div>\n\t\t\t<span class=\"truncate text-left text-sm\">{song.name}</span>\n\t\t</div>\n\t</Button>\n</div>\n",
			"type": "registry:block",
			"target": "components/blocks/music-player-01/music-player-01-song.svelte"
		},
		{
			"content": "import MusicPlayer01 from \"./music-player-01.svelte\";\n\nexport { MusicPlayer01, MusicPlayer01 as default };\n",
			"type": "registry:block",
			"target": "components/blocks/music-player-01/index.ts"
		}
	]
}