{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ipod",
  "title": "iPod",
  "description": "The classic iPod: white shell, LCD screen and a working click wheel.",
  "files": [
    {
      "path": "registry/aqua/ui/ipod.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction IPod({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"ipod\"\n      className={cn(\n        \"flex w-[290px] shrink-0 flex-col items-center gap-6 rounded-[36px] bg-[linear-gradient(160deg,#ffffff_0%,#eceef2_55%,#d8dbe1_100%)] px-[22px] pb-[30px] pt-6 shadow-[inset_0_2px_0_rgba(255,255,255,0.9),inset_0_-4px_10px_rgba(20,30,50,0.08),0_0_0_1px_rgba(20,30,50,0.12),0_26px_55px_rgba(20,30,50,0.28),0_4px_10px_rgba(20,30,50,0.12)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction IPodScreen({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"ipod-screen\"\n      className={cn(\n        \"w-full rounded-[10px] bg-[linear-gradient(180deg,#23262c,#3a3e46)] p-[7px] shadow-[inset_0_2px_5px_rgba(0,0,0,0.6),0_1px_0_rgba(255,255,255,0.8)]\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"overflow-hidden rounded-[5px] bg-[#f2f6fb] shadow-[inset_0_0_8px_rgba(40,70,120,0.15)]\">\n        {children}\n      </div>\n    </div>\n  )\n}\n\nfunction IPodHeader({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"ipod-header\"\n      className={cn(\n        \"relative flex h-6 items-center justify-center border-b border-[#93a7c2] bg-[linear-gradient(180deg,#fdfefe_0%,#cfdcec_50%,#b6c9e0_100%)] text-[12px] font-bold text-[#2c3e58] [text-shadow:0_1px_0_rgba(255,255,255,0.7)]\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <span className=\"absolute right-2 h-[10px] w-5 rounded-[2px] border border-[#6b7f9c] bg-[linear-gradient(180deg,#d9f5c0,#7fce4f)] shadow-[inset_0_1px_0_rgba(255,255,255,0.6)] after:absolute after:right-[-3px] after:top-[2px] after:h-1 after:w-[2px] after:rounded-r-[1px] after:bg-[#6b7f9c] after:content-['']\" />\n    </div>\n  )\n}\n\nconst WHEEL_BUTTON =\n  \"absolute p-1.5 text-[11px] font-bold tracking-[0.06em] text-[#9aa0aa] outline-none transition-[filter] [text-shadow:0_1px_0_rgba(255,255,255,0.8)] hover:brightness-95 focus-visible:text-[#6b7f9c] active:brightness-90\"\n\nfunction ClickWheel({\n  className,\n  onMenu,\n  onPrev,\n  onNext,\n  onPlayPause,\n  onSelect,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  onMenu?: () => void\n  onPrev?: () => void\n  onNext?: () => void\n  onPlayPause?: () => void\n  onSelect?: () => void\n}) {\n  return (\n    <div\n      data-slot=\"click-wheel\"\n      className={cn(\n        \"relative size-[188px] rounded-full bg-[radial-gradient(circle_at_50%_32%,#fcfdfe,#e2e5ea_62%,#d0d4db_100%)] shadow-[inset_0_2px_4px_rgba(255,255,255,0.9),inset_0_-3px_6px_rgba(20,30,50,0.12),0_1px_2px_rgba(20,30,50,0.1)]\",\n        className\n      )}\n      {...props}\n    >\n      <button\n        type=\"button\"\n        onClick={onMenu}\n        className={cn(WHEEL_BUTTON, \"left-1/2 top-2 -translate-x-1/2\")}\n      >\n        MENU\n      </button>\n      <button\n        type=\"button\"\n        aria-label=\"Previous\"\n        onClick={onPrev}\n        className={cn(WHEEL_BUTTON, \"left-2 top-1/2 -translate-y-1/2\")}\n      >\n        &#9668;&#9668;\n      </button>\n      <button\n        type=\"button\"\n        aria-label=\"Next\"\n        onClick={onNext}\n        className={cn(WHEEL_BUTTON, \"right-2 top-1/2 -translate-y-1/2\")}\n      >\n        &#9658;&#9658;\n      </button>\n      <button\n        type=\"button\"\n        aria-label=\"Play or pause\"\n        onClick={onPlayPause}\n        className={cn(WHEEL_BUTTON, \"bottom-2 left-1/2 -translate-x-1/2\")}\n      >\n        &#9658;&#10073;&#10073;\n      </button>\n      <button\n        type=\"button\"\n        aria-label=\"Select\"\n        onClick={onSelect}\n        className=\"absolute left-1/2 top-1/2 size-[72px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[radial-gradient(circle_at_50%_35%,#f7f8fa,#dcdfe5_70%,#ced2d9_100%)] shadow-[inset_0_2px_5px_rgba(20,30,50,0.18),0_1px_0_rgba(255,255,255,0.9)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--aqua-ring,#6cb0f7)]/70 active:shadow-[inset_0_3px_7px_rgba(20,30,50,0.28),0_1px_0_rgba(255,255,255,0.9)]\"\n      />\n    </div>\n  )\n}\n\nexport { IPod, IPodScreen, IPodHeader, ClickWheel }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}