{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "apple-iphone-17-pro",
  "type": "registry:ui",
  "description": "iPhone-style device frame with Dynamic Island, status bar, and configurable frame colors",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "registry/default/ui/apple-iphone-17-pro.tsx",
      "content": "\"use client\"\n\nimport {\n  useState,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from \"react\"\nimport {\n  AlignJustify,\n  AudioLines,\n  Heart,\n  Mic,\n  Music,\n  Pause,\n  Play,\n  SkipBack,\n  SkipForward,\n  Wifi,\n} from \"lucide-react\"\nimport { AnimatePresence, motion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type DynamicIslandSize =\n  | \"default\"\n  | \"compact\"\n  | \"expanded\"\n  | \"large\"\n  | \"ultra\"\n\nexport interface IPhoneProps {\n  /** Content to display on the screen */\n  children?: ReactNode\n  /** Dynamic Island size preset */\n  dynamicIslandSize?: DynamicIslandSize\n  /** Content to display inside the Dynamic Island when expanded */\n  dynamicIslandContent?: ReactNode\n  /** Frame color variant */\n  frameColor?: \"graphite\" | \"silver\" | \"gold\" | \"blue\"\n  /** Show status bar */\n  showStatusBar?: boolean\n  /** Show home indicator */\n  showHomeIndicator?: boolean\n  /** Custom time to display */\n  time?: string\n  /** Battery level (0-100) */\n  batteryLevel?: number\n  /** Signal strength (0-4) */\n  signalStrength?: number\n  /** Callback when Dynamic Island is tapped */\n  onDynamicIslandTap?: () => void\n  /** Callback when screen is tapped */\n  onScreenTap?: () => void\n  /** Custom className for the container */\n  className?: string\n}\n\nconst FRAME_COLORS = {\n  graphite: {\n    gradient:\n      \"linear-gradient(145deg, #454549 0%, #3d3d41 15%, #363839 30%, #3a3a3e 50%, #424246 70%, #3b3b3f 85%, #343438 100%)\",\n    button:\n      \"linear-gradient(180deg, #424246 0%, #3a3a3e 30%, #363839 50%, #3a3a3e 70%, #424246 100%)\",\n  },\n  silver: {\n    gradient:\n      \"linear-gradient(145deg, #e8e8e8 0%, #d4d4d4 15%, #c0c0c0 30%, #d0d0d0 50%, #e0e0e0 70%, #cccccc 85%, #b8b8b8 100%)\",\n    button:\n      \"linear-gradient(180deg, #e0e0e0 0%, #c8c8c8 30%, #b0b0b0 50%, #c8c8c8 70%, #e0e0e0 100%)\",\n  },\n  gold: {\n    gradient:\n      \"linear-gradient(145deg, #ff9544 0%, #f88535 15%, #F77E2D 30%, #f88535 50%, #ff9040 70%, #f88030 85%, #F77E2D 100%)\",\n    button:\n      \"linear-gradient(180deg, #ff9040 0%, #f88535 30%, #F77E2D 50%, #f88535 70%, #ff9040 100%)\",\n  },\n  blue: {\n    gradient:\n      \"linear-gradient(145deg, #3f4459 0%, #383c50 15%, #32374B 30%, #383c50 50%, #3d4256 70%, #363a4e 85%, #32374B 100%)\",\n    button:\n      \"linear-gradient(180deg, #3d4256 0%, #383c50 30%, #32374B 50%, #383c50 70%, #3d4256 100%)\",\n  },\n}\n\ntype FrameColor = keyof typeof FRAME_COLORS\n\n/** Per-finish lighting for left rail; silver & blue reuse graphite preset. */\nconst LEFT_BUTTON_LIGHTING: Record<\n  \"graphite\" | \"gold\",\n  {\n    beforeShadow: string\n    afterClasses: string\n    boxShadow: string\n  }\n> = {\n  graphite: {\n    beforeShadow:\n      \"before:shadow-[inset_0_1px_0_rgba(255,255,255,0.22),inset_1px_0_0_rgba(255,255,255,0.15),inset_0_-1px_0_rgba(0,0,0,0.28)]\",\n    afterClasses:\n      \"after:bg-gradient-to-b after:from-black/50 after:via-black/20 after:to-transparent\",\n    boxShadow: `\n      -1px 0 0 0 rgba(255, 255, 255, 0.16),\n      -2px 3px 5px -1px rgba(0, 0, 0, 0.34),\n      -4px 5px 12px -2px rgba(0, 0, 0, 0.2),\n      inset 1px 0 1px rgba(255, 255, 255, 0.12)\n    `,\n  },\n  gold: {\n    beforeShadow:\n      \"before:shadow-[inset_0_1px_0_rgba(255,228,195,0.5),inset_1px_0_0_rgba(255,240,215,0.3),inset_0_-1px_0_rgba(115,52,18,0.38)]\",\n    afterClasses:\n      \"after:bg-gradient-to-b after:from-[rgba(72,36,14,0.58)] after:via-[rgba(72,36,14,0.22)] after:to-transparent\",\n    boxShadow: `\n      -1px 0 0 0 rgba(255, 246, 225, 0.24),\n      -2px 3px 5px -1px rgba(48, 24, 8, 0.34),\n      -4px 5px 12px -2px rgba(80, 40, 14, 0.2),\n      inset 1px 0 1px rgba(255, 232, 205, 0.22)\n    `,\n  },\n}\n\nfunction leftRailLighting(frameColor: FrameColor) {\n  return frameColor === \"gold\"\n    ? LEFT_BUTTON_LIGHTING.gold\n    : LEFT_BUTTON_LIGHTING.graphite\n}\n\nfunction LeftRailButton({\n  frameColor,\n  frameColorScheme,\n  className,\n}: {\n  frameColor: FrameColor\n  frameColorScheme: (typeof FRAME_COLORS)[FrameColor]\n  className?: string\n}) {\n  const L = leftRailLighting(frameColor)\n  return (\n    <div\n      aria-hidden\n      className={cn(\n        \"-left-[3px] absolute w-[3px] overflow-visible rounded-l-sm transition-shadow duration-200\",\n        \"isolate\",\n        \"before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-l-sm before:content-['']\",\n        L.beforeShadow,\n        \"after:-right-px after:-left-px after:pointer-events-none after:absolute after:top-[calc(100%-2px)] after:z-0 after:h-2.5 after:opacity-[0.72] after:blur-xs after:content-['']\",\n        L.afterClasses,\n        className\n      )}\n      style={{\n        background: frameColorScheme.button,\n        boxShadow: L.boxShadow,\n      }}\n    />\n  )\n}\n\nconst DYNAMIC_ISLAND_SIZES = {\n  default: { width: 110, height: 32, borderRadius: 16 },\n  compact: { width: 90, height: 28, borderRadius: 14 },\n  /** width ignored for motion — expanded uses nearly full screen width */\n  expanded: { width: 280, height: 56, borderRadius: 32 },\n  large: { width: 290, height: 120, borderRadius: 32 },\n  ultra: { width: 300, height: 180, borderRadius: 36 },\n}\n\nfunction getIslandMotionAnimate(size: DynamicIslandSize) {\n  const c = DYNAMIC_ISLAND_SIZES[size]\n  //   if (size === \"expanded\") {\n  //     return {\n  //       width: \"calc(100% - 18px)\",\n  //       borderRadius: c.borderRadius,\n  //       height: c.height,\n  //     };\n  //   }\n  return {\n    width: c.width,\n    borderRadius: c.borderRadius,\n    height: c.height,\n  }\n}\n\nexport function IPhone17ProMax({\n  children,\n  dynamicIslandSize = \"default\",\n  dynamicIslandContent,\n  frameColor = \"graphite\",\n  showStatusBar = true,\n  showHomeIndicator = true,\n  time = \"9:41\",\n  batteryLevel = 94,\n  signalStrength = 2,\n  onDynamicIslandTap,\n  onScreenTap,\n  className = \"\",\n}: IPhoneProps) {\n  const [internalDynamicIslandSize, setInternalDynamicIslandSize] =\n    useState<DynamicIslandSize>(dynamicIslandSize)\n\n  const frameColorScheme = FRAME_COLORS[frameColor]\n\n  const handleDynamicIslandTap = () => {\n    if (onDynamicIslandTap) {\n      onDynamicIslandTap()\n    } else {\n      // Default behavior: toggle between default and expanded\n      setInternalDynamicIslandSize((prev) =>\n        prev === \"default\" ? \"expanded\" : \"default\"\n      )\n    }\n  }\n\n  // Sync with external prop changes\n  if (dynamicIslandSize !== internalDynamicIslandSize && onDynamicIslandTap) {\n    setInternalDynamicIslandSize(dynamicIslandSize)\n  }\n\n  return (\n    <div className={`flex items-center justify-center p-4 ${className}`}>\n      {/* Phone Container - iPhone 17 Pro Max aspect ratio */}\n      <div\n        className={\"relative transition-transform duration-150 ease-out\"}\n        style={{\n          height: \"min(700px, 85vh)\",\n          aspectRatio: \"71.5 / 149.6\",\n          //   aspectRatio: \"71.5 / 145.6\",\n        }}\n      >\n        {/* Outer Shadow */}\n        <div\n          className=\"absolute inset-0 rounded-[55px]\"\n          style={{\n            boxShadow:\n              \"0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15)\",\n          }}\n        />\n\n        {/* Titanium Frame */}\n        <div\n          className=\"absolute inset-0 rounded-[55px]\"\n          style={{\n            background: frameColorScheme.gradient,\n            padding: \"3px\",\n          }}\n        >\n          {/* Inner Black Bezel */}\n          <div\n            className=\"relative h-full w-full overflow-hidden rounded-[52px]\"\n            style={{\n              background: \"#0a0a0a\",\n              padding: \"3px\",\n            }}\n          >\n            {/* Screen */}\n            <div\n              className=\"relative h-full w-full cursor-pointer overflow-hidden rounded-[49px] bg-white\"\n              {...(onScreenTap\n                ? {\n                    role: \"button\" as const,\n                    tabIndex: 0,\n                    \"aria-label\": \"Phone screen\",\n                    onKeyDown: (e: ReactKeyboardEvent<HTMLDivElement>) => {\n                      if (e.key === \"Enter\" || e.key === \" \") {\n                        e.preventDefault()\n                        onScreenTap()\n                      }\n                    },\n                  }\n                : {})}\n              onClick={(e) => {\n                e.stopPropagation()\n                if (onScreenTap) {\n                  onScreenTap()\n                  return\n                }\n                handleDynamicIslandTap()\n              }}\n            >\n              {/* Status Bar */}\n              {showStatusBar && (\n                <div className=\"absolute top-0 right-0 left-0 z-10 flex items-center justify-between px-6 pt-4 font-medium text-black text-xs\">\n                  {/* Left side - Time */}\n                  <div className=\"mt-1 ml-1 flex w-14 items-center gap-1\">\n                    <span className=\"font-semibold text-[14px] tracking-tight\">\n                      {time}\n                    </span>\n                  </div>\n\n                  {/* Right side - Signal, WiFi, Battery */}\n                  <div className=\"flex w-17 items-center justify-end gap-[5px]\">\n                    {/* Signal Bars */}\n                    <div className=\"flex items-end gap-px\">\n                      {[1, 2, 3, 4].map((i) => (\n                        <div\n                          className={cn(\n                            \"w-[3px] rounded-[1px] bg-black\",\n                            i <= signalStrength ? \"opacity-100\" : \"opacity-30\"\n                          )}\n                          key={i}\n                          style={{\n                            height: `${3 + i * 2}px`,\n                            opacity: i <= signalStrength ? 1 : 0.3,\n                          }}\n                        />\n                      ))}\n                    </div>\n                    <Wifi\n                      className=\"size-3.5 text-black\"\n                      size={13}\n                      strokeWidth={2}\n                    />\n                    {/* Battery */}\n                    <div className=\"relative flex items-center\">\n                      <div className=\"relative h-[12px] w-[24px] rounded-[4px] border border-gray-900/20 ring-1 ring-white/5\">\n                        <div\n                          className=\"absolute top-[1.2px] bottom-px left-[1.2px] rounded-[2.5px] bg-gray-950/90 transition-all\"\n                          style={{\n                            width: `${Math.max(0, Math.min(100, batteryLevel)) * 0.19}px`,\n                          }}\n                        />\n                      </div>\n                      <div className=\"ml-[0.5px] h-[5px] w-[1.5px] rounded-r-sm bg-black/40\" />\n                    </div>\n                  </div>\n                </div>\n              )}\n\n              {/* Dynamic Island */}\n              <motion.div\n                animate={getIslandMotionAnimate(internalDynamicIslandSize)}\n                className={cn(\n                  \"absolute top-3 z-20 flex cursor-pointer items-center justify-center overflow-hidden bg-black\",\n                  internalDynamicIslandSize === \"expanded\"\n                    ? \"-translate-x-1/2 left-1/2 max-w-[calc(100%-18px)]\"\n                    : \"-translate-x-1/2 left-1/2\"\n                )}\n                onClick={(e) => {\n                  e.stopPropagation()\n                  handleDynamicIslandTap()\n                }}\n                transition={{\n                  type: \"spring\",\n                  stiffness: 400,\n                  damping: 30,\n                }}\n              >\n                <AnimatePresence mode=\"wait\">\n                  {internalDynamicIslandSize === \"default\" ||\n                  internalDynamicIslandSize === \"compact\" ? (\n                    <motion.div\n                      animate={{ opacity: 1 }}\n                      className=\"absolute right-3\"\n                      exit={{ opacity: 0 }}\n                      initial={{ opacity: 0 }}\n                      key=\"camera\"\n                    >\n                      {/* Camera lens inside Dynamic Island */}\n                      <div\n                        className=\"h-[10px] w-[10px] rounded-full\"\n                        style={{\n                          background:\n                            \"radial-gradient(circle at 30% 30%, #2a3a5a 0%, #0f1520 60%, #000 100%)\",\n                          boxShadow: \"inset 0 0 2px rgba(100, 150, 255, 0.3)\",\n                        }}\n                      />\n                    </motion.div>\n                  ) : (\n                    <motion.div\n                      animate={{ opacity: 1, scale: 1 }}\n                      className=\"flex h-full w-full items-center justify-center p-3 text-white\"\n                      exit={{ opacity: 0, scale: 0.8 }}\n                      initial={{ opacity: 0, scale: 0.8 }}\n                      key=\"content\"\n                      transition={{\n                        type: \"spring\",\n                        stiffness: 400,\n                        damping: 30,\n                      }}\n                    >\n                      {dynamicIslandContent || (\n                        <DefaultDynamicIslandContent\n                          size={internalDynamicIslandSize}\n                        />\n                      )}\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n              </motion.div>\n\n              {/* Screen Content Area */}\n              <div className=\"absolute inset-0 flex flex-col pt-14\">\n                {children}\n              </div>\n\n              {/* Home Indicator */}\n              {showHomeIndicator && (\n                <div className=\"-translate-x-1/2 absolute bottom-2 left-1/2\">\n                  <div className=\"h-1 w-32 rounded-full bg-black/80\" />\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Side Buttons - Right Side (Power Button) */}\n        <div\n          className=\"-right-[3px] absolute top-[28%] h-[65px] w-[3px] rounded-r-sm transition-shadow duration-200\"\n          style={{\n            background: frameColorScheme.button,\n            boxShadow: `\n              1px 0 0 0 rgba(255, 255, 255, 0.15),\n              2px 1px 3px -1px rgba(0, 0, 0, 0.25),\n              3px 2px 6px 0 rgba(0, 0, 0, 0.15),\n              inset -1px 0 1px rgba(255, 255, 255, 0.1)\n            `,\n          }}\n        />\n\n        {/* Side Buttons - Left Side */}\n        <LeftRailButton\n          className=\"top-[20%] h-[22px]\"\n          frameColor={frameColor}\n          frameColorScheme={frameColorScheme}\n        />\n        <LeftRailButton\n          className=\"top-[27%] h-[40px]\"\n          frameColor={frameColor}\n          frameColorScheme={frameColorScheme}\n        />\n        <LeftRailButton\n          className=\"top-[36%] h-[40px]\"\n          frameColor={frameColor}\n          frameColorScheme={frameColorScheme}\n        />\n\n        {/* Frame Highlights */}\n        <div\n          className=\"pointer-events-none absolute inset-0 rounded-[55px]\"\n          style={{\n            background: `linear-gradient(\n              135deg,\n              rgba(255, 255, 255, 0.15) 0%,\n              transparent 25%,\n              transparent 75%,\n              rgba(0, 0, 0, 0.1) 100%\n            )`,\n          }}\n        />\n      </div>\n    </div>\n  )\n}\n\nconst ISLAND_ART =\n  \"bg-linear-to-br from-pink-500 via-orange-400 to-violet-600 shadow-[inset_0_1px_2px_rgba(255,255,255,0.35)]\"\n\nconst MINI_WAVEFORM_BARS = [\n  { id: \"a\", h: 8 },\n  { id: \"b\", h: 18 },\n  { id: \"c\", h: 12 },\n  { id: \"d\", h: 12 },\n  { id: \"e\", h: 17 },\n  { id: \"f\", h: 24 },\n  { id: \"g\", h: 15 },\n  { id: \"h\", h: 20 },\n  { id: \"i\", h: 16 },\n  { id: \"j\", h: 21 },\n  { id: \"k\", h: 14 },\n  { id: \"l\", h: 18 },\n] as const\n\nfunction MiniWaveform({ className }: { className?: string }) {\n  return (\n    <div aria-hidden className={cn(\"flex h-5 items-end gap-px\", className)}>\n      {MINI_WAVEFORM_BARS.map(({ id, h }) => (\n        <span\n          className=\"w-1 min-w-px rounded-full bg-rose-400/95\"\n          key={id}\n          style={{ height: h }}\n        />\n      ))}\n    </div>\n  )\n}\n\n/** Spotify “circle + three arcs” mark (#1DB954), decorative only */\nfunction SpotifyLogoMark({ className }: { className?: string }) {\n  return (\n    <svg aria-hidden className={cn(\"shrink-0\", className)} viewBox=\"0 0 24 24\">\n      <title>Spotify</title>\n      <path\n        d=\"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z\"\n        fill=\"#1DB954\"\n      />\n    </svg>\n  )\n}\n\n/** Green disc + dark waveform (Spotify-style app icon), decorative */\nfunction SpotifyAppIcon({ className }: { className?: string }) {\n  return (\n    <div\n      aria-hidden\n      className={cn(\n        \"flex size-9 shrink-0 items-center justify-center rounded-full bg-[#1DB954]\",\n        className\n      )}\n    >\n      <AudioLines className=\"size-[18px] text-black\" strokeWidth={2.75} />\n    </div>\n  )\n}\n\nconst PAUSE_RING_R = 15\n\nfunction PauseWithProgressRing({\n  progress = 0.75,\n  className,\n}: {\n  progress?: number\n  className?: string\n}) {\n  const circumference = 2 * Math.PI * PAUSE_RING_R\n  const dashOffset = circumference * (1 - progress)\n  return (\n    <span\n      aria-hidden\n      className={cn(\n        \"relative inline-flex size-10 items-center justify-center\",\n        className\n      )}\n    >\n      <svg\n        className=\"-rotate-90 absolute inset-0 size-full\"\n        viewBox=\"0 0 44 44\"\n      >\n        <title>Playback progress</title>\n        <circle\n          cx=\"22\"\n          cy=\"22\"\n          fill=\"none\"\n          r={PAUSE_RING_R}\n          stroke=\"rgba(255,255,255,0.14)\"\n          strokeWidth=\"2.5\"\n        />\n        <circle\n          cx=\"22\"\n          cy=\"22\"\n          fill=\"none\"\n          r={PAUSE_RING_R}\n          stroke=\"#1DB954\"\n          strokeDasharray={circumference}\n          strokeDashoffset={dashOffset}\n          strokeLinecap=\"round\"\n          strokeWidth=\"2.5\"\n        />\n      </svg>\n      <span className=\"flex size-8 items-center justify-center rounded-full bg-white/[0.14]\">\n        <Pause className=\"size-3.5 text-white\" strokeWidth={2.5} />\n      </span>\n    </span>\n  )\n}\n\n// Default content shown in expanded Dynamic Island\nfunction DefaultDynamicIslandContent({ size }: { size: DynamicIslandSize }) {\n  if (size === \"expanded\") {\n    return (\n      <div className=\"flex h-full w-full items-center justify-between gap-3 px-0.5\">\n        <div className=\"flex min-w-0 items-center gap-2.5\">\n          <SpotifyAppIcon />\n          <div className=\"min-w-0\">\n            <p className=\"truncate text-[11px] text-white/65\">RY X</p>\n            <p className=\"truncate font-semibold text-[14px] text-white leading-tight\">\n              Let You Go\n            </p>\n          </div>\n        </div>\n        <div className=\"flex shrink-0 items-center gap-2\">\n          <PauseWithProgressRing progress={0.72} />\n          <span\n            aria-hidden\n            className=\"flex size-9 items-center justify-center rounded-full bg-white/[0.14] text-white\"\n          >\n            <SkipForward className=\"size-4\" strokeWidth={2.25} />\n          </span>\n        </div>\n      </div>\n    )\n  }\n\n  if (size === \"large\") {\n    return (\n      <div className=\"flex h-full w-full flex-col justify-between gap-1 text-white\">\n        <div className=\"flex items-center gap-2.5\">\n          <div\n            aria-hidden\n            className={cn(\"h-14 w-14 shrink-0 rounded-xl\", ISLAND_ART)}\n          />\n          <div className=\"min-w-0 flex-1\">\n            <p className=\"truncate font-semibold text-[12px] uppercase tracking-wide\">\n              The Move\n            </p>\n            <p className=\"truncate text-[11px] text-white/55\">Space Rangers</p>\n          </div>\n          <MiniWaveform className=\"h-12\" />\n        </div>\n\n        <div className=\"space-y-1 px-2 pb-2\">\n          <div className=\"flex justify-between font-medium text-[9px] text-white/45 tabular-nums\">\n            <span>1:20</span>\n            <span>-1:48</span>\n          </div>\n          <div className=\"h-1 w-full overflow-hidden rounded-full bg-white/16\">\n            <div className=\"h-full w-[41%] rounded-full bg-white\" />\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  if (size === \"ultra\") {\n    const ultraCtrl =\n      \"flex size-7.5 shrink-0 items-center justify-center rounded-full bg-white/[0.14] text-white ring-1 ring-gray-900/30\"\n\n    return (\n      <div className=\"flex h-full w-full flex-col gap-2.5 text-white\">\n        <div className=\"mt-0.5 flex items-center justify-between font-medium text-[10px] tabular-nums\">\n          <span className=\"ml-2 text-white/90\">0:42</span>\n          <SpotifyLogoMark className=\"mr-2 h-[18px] w-[18px]\" />\n        </div>\n\n        <div className=\"flex items-center gap-2.5\">\n          <div\n            aria-hidden\n            className={cn(\n              \"h-[40px] w-[40px] shrink-0 rounded-full\",\n              ISLAND_ART\n            )}\n          />\n          <div className=\"min-w-0 flex-1\">\n            <p className=\"text-[11px] text-white/65\">RY X</p>\n            <p className=\"font-semibold text-[15px] text-white leading-snug tracking-tight\">\n              Let You Go\n            </p>\n          </div>\n          <div aria-hidden className=\"flex shrink-0 gap-2\">\n            <span className={ultraCtrl}>\n              <Mic className=\"size-3.5 text-white/80\" strokeWidth={2.5} />\n            </span>\n            <span className={cn(ultraCtrl, \"relative\")}>\n              <Music className=\"size-3.5 text-white/80\" strokeWidth={2.5} />\n              {/* <UserRound className=\"h-4 w-4\" strokeWidth={2} />\n              <span className=\"pointer-events-none absolute -right-0.5 -bottom-0.5 flex h-3 w-3 items-center justify-center rounded-full bg-white/14 ring-1 ring-black/40\">\n                <Music className=\"h-2 w-2 text-white\" strokeWidth={2.5} />\n              </span> */}\n            </span>\n          </div>\n        </div>\n\n        <div>\n          <div className=\"mb-1 flex justify-between gap-2 font-medium text-[10px] text-white/45 tabular-nums\">\n            <span>1:40</span>\n            <div className=\"relative flex h-4 w-full items-center\">\n              <div className=\"mx-auto h-1 w-full rounded-full bg-white/14\" />\n              <div className=\"-translate-y-1/2 absolute top-1/2 left-0 h-1 w-[48%] rounded-l-full bg-white\" />\n              <div\n                aria-hidden\n                className=\"-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-[48%] z-10 h-3.5 w-3.5 rounded-full border border-black/25 bg-white shadow-[0_1px_4px_rgba(0,0,0,0.4)]\"\n              />\n            </div>\n            <span>3:20</span>\n          </div>\n        </div>\n\n        <div className=\"mt-2 grid grid-cols-5 place-items-center gap-1\">\n          <span aria-hidden className={ultraCtrl}>\n            <Heart className=\"h-[15px] w-[15px]\" strokeWidth={2} />\n          </span>\n          <span aria-hidden className={ultraCtrl}>\n            <SkipBack className=\"h-[17px] w-[17px]\" strokeWidth={2} />\n          </span>\n          <span aria-hidden className={ultraCtrl}>\n            <Play\n              className=\"ml-0.5 h-[17px] w-[17px] fill-current text-white\"\n              strokeWidth={0}\n            />\n          </span>\n          <span aria-hidden className={ultraCtrl}>\n            <SkipForward className=\"h-[17px] w-[17px]\" strokeWidth={2} />\n          </span>\n          <span aria-hidden className={ultraCtrl}>\n            <AlignJustify className=\"h-[15px] w-[15px]\" strokeWidth={2} />\n          </span>\n        </div>\n      </div>\n    )\n  }\n\n  return null\n}\n\n// Keep the old export for backwards compatibility\nexport default IPhone17ProMax\n",
      "type": "registry:ui"
    }
  ]
}