{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "iphone",
  "type": "registry:ui",
  "files": [
    {
      "path": "registry/designali/ui/apple/iphone.tsx",
      "content": " \nimport * as React from \"react\";\n\ninterface IPhoneProps {\n  children: React.ReactNode;\n  className?: string;\n\n  /** Phone variant/model */\n  variant?: \"18-pro\" | \"18-pro-max\";\n\n  /** Phone size */\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n  /** Phone orientation */\n  orientation?: \"portrait\" | \"landscape\";\n\n  /** Frame color */\n  color?: \"black\" | \"glacier\" | \"silver\" | \"burgundy\";\n \n}\n\ntype PhoneVariant = IPhoneProps[\"variant\"];\ntype PhoneColor = IPhoneProps[\"color\"];\n\ninterface PhoneImageSet {\n  portrait: string;\n  landscape: string;\n}\n\nconst phoneImages: Record<\n  NonNullable<PhoneVariant>,\n  Record<NonNullable<PhoneColor>, PhoneImageSet>\n> = {\n  \"18-pro\": {\n    black: {\n      portrait:\n        \"https://ik.imagekit.io/designali/images/apple/iPhone%2018%20Pro/iPhone%2018%20Pro%20-%20Black%20-%20Portrait.png?updatedAt=1790753757506\",\n      landscape:\n        \"https://ik.imagekit.io/designali/images/apple/iPhone%2018%20Pro/iPhone%2018%20Pro%20-%20Black%20-%20Landscape.png?updatedAt=1790753757599\",\n    },\n\n    glacier: {\n      portrait:\n        \"https://ik.imagekit.io/designali/images/apple/iPhone%2018%20Pro/iPhone%2018%20Pro%20-%20Glacier%20-%20Portrait.png?updatedAt=1790753757500\",\n      landscape:\n        \"https://ik.imagekit.io/designali/images/apple/iPhone%2018%20Pro/iPhone%2018%20Pro%20-%20Glacier%20-%20Landscape.png?updatedAt=1790753757584\",\n    },\n\n    burgundy: {\n      portrait:\n        \"https://ik.imagekit.io/designali/images/apple/iPhone%2018%20Pro/iPhone%2018%20Pro%20-%20Burgundy%20-%20Portrait.png?updatedAt=1790753757463\",\n      landscape:\n        \"https://ik.imagekit.io/designali/images/apple/iPhone%2018%20Pro/iPhone%2018%20Pro%20-%20Burgundy%20-%20Landscape.png?updatedAt=1790753757455\",\n    },\n\n    silver: {\n      portrait:\n        \"https://ik.imagekit.io/designali/images/apple/iPhone%2018%20Pro/iPhone%2018%20Pro%20-%20Silver%20-%20Portrait.png?updatedAt=1790753757463\",\n      landscape:\n        \"https://ik.imagekit.io/designali/images/apple/iPhone%2018%20Pro/iPhone%2018%20Pro%20-%20Silver%20-%20Landscape.png?updatedAt=1790753757401\",\n    },\n  },\n\n  \"18-pro-max\": {\n    black: {\n      portrait:\n        \"https://ik.imagekit.io/designali/images/apple/iPhone%2018%20Pro%20Max/iPhone%2018%20Pro%20Max%20-%20Black%20-%20Portrait.png?updatedAt=1790753782105\",\n      landscape:\n        \"https://ik.imagekit.io/designali/images/apple/iPhone%2018%20Pro%20Max/iPhone%2018%20Pro%20Max%20-%20Black%20-%20Landscape.png?updatedAt=1790753781681\",\n    },\n\n    glacier: {\n      portrait:\n        \"https://ik.imagekit.io/designali/images/apple/iPhone%2018%20Pro%20Max/iPhone%2018%20Pro%20Max%20-%20Glacier%20-%20Portrait.png?updatedAt=1790753782052\",\n      landscape:\n        \"https://ik.imagekit.io/designali/images/apple/iPhone%2018%20Pro%20Max/iPhone%2018%20Pro%20Max%20-%20Glacier%20-%20Landscape.png?updatedAt=1790753781936\",\n    },\n\n    burgundy: {\n      portrait:\n        \"https://ik.imagekit.io/designali/images/apple/iPhone%2018%20Pro%20Max/iPhone%2018%20Pro%20Max%20-%20Burgundy%20-%20Portrait.png?updatedAt=1790753781624\",\n      landscape:\n        \"https://ik.imagekit.io/designali/images/apple/iPhone%2018%20Pro%20Max/iPhone%2018%20Pro%20Max%20-%20Burgundy%20-%20Landscape.png?updatedAt=1790753782132\",\n    },\n\n    silver: {\n      portrait:\n        \"https://ik.imagekit.io/designali/images/apple/iPhone%2018%20Pro%20Max/iPhone%2018%20Pro%20Max%20-%20Silver%20-%20Portrait.png?updatedAt=1790753782050\",\n      landscape:\n        \"https://ik.imagekit.io/designali/images/apple/iPhone%2018%20Pro%20Max/iPhone%2018%20Pro%20Max%20-%20Silver%20-%20Landscape.png?updatedAt=1790753782050\",\n    },\n  },\n};\n\nconst sizeClasses = {\n  sm: \"h-[20rem]\",\n  md: \"h-[28rem]\",\n  lg: \"h-[32rem]\",\n  xl: \"h-[48rem]\",\n};\n\nconst landscapeSizeClasses = {\n  sm: \"h-[14rem]\",\n  md: \"h-[20rem]\",\n  lg: \"h-[24rem]\",\n  xl: \"h-[32rem]\",\n};\n\nconst roundedClasses = {\n  sm: \"rounded-[20px]\",\n  md: \"rounded-[32px]\",\n  lg: \"rounded-[32px]\",\n  xl: \"rounded-[48px]\",\n};\n\nconst landscapeRoundedClasses = {\n  sm: \"rounded-[32px]\",\n  md: \"rounded-[48px]\",\n  lg: \"rounded-[52px]\",\n  xl: \"rounded-[64px]\",\n};\n\nexport function IPhone({\n  children,\n  className = \"\",\n  variant = \"18-pro\",\n  size = \"md\",\n  orientation = \"portrait\",\n  color = \"silver\", \n}: IPhoneProps) {\n  const isLandscape = orientation === \"landscape\";\n\n  const defaultImages = phoneImages[variant][color];\n\n  const frameImage = \n    (isLandscape\n      ? defaultImages.landscape\n      : defaultImages.portrait);\n\n  return (\n    <div\n      className={`\n        relative inline-block\n        ${isLandscape ? landscapeSizeClasses[size] : sizeClasses[size]}\n        ${isLandscape ? \"aspect-[19.5/9]\" : \"aspect-[9/19.5]\"}\n        ${className}\n      `}\n    >\n      <img\n        src={frameImage}\n        alt={\"iPhone\"}\n        className=\"pointer-events-none absolute inset-0 z-10 h-full w-full select-none object-contain\"\n      />\n\n      <div\n        className={`\n          absolute inset-[4%] overflow-hidden bg-background\n          ${\n            isLandscape\n              ? landscapeRoundedClasses[size]\n              : roundedClasses[size]\n          }\n        `}\n      >\n        <div className=\"h-full w-full overflow-y-auto\">\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n} \n",
      "type": "registry:ui"
    }
  ]
}