{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ipad",
  "type": "registry:ui",
  "files": [
    {
      "path": "registry/designali/ui/apple/ipad.tsx",
      "content": "import * as React from \"react\";\n\ninterface IpadProps {\n  children: React.ReactNode;\n  className?: string;\n\n  /** iPad variant/model */\n  variant?: \"ipad-pro\" | \"ipad-air\";\n\n  /** iPad size */\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n  /** iPad orientation */\n  orientation?: \"portrait\" | \"landscape\";\n\n  /** Frame color based on the selected variant */\n  color?: \"black\" | \"silver\" | \"purple\" | \"space-grey\" | \"starlight\" | \"blue\";\n\n}\n\ntype IpadVariant = IpadProps[\"variant\"];\ntype IpadColor = IpadProps[\"color\"];\n\ninterface IpadImageSet {\n  portrait: string;\n  landscape: string;\n}\n\nconst ipadImages: Record<\n  NonNullable<IpadVariant>,\n  Record<string, IpadImageSet>\n> = {\n  \"ipad-pro\": {\n    black: {\n      portrait:\n        \"https://ik.imagekit.io/designali/images/apple/iPad%20Pro/iPad%20Pro%20(M5)%2013_%20-%20Space%20Black%20-%20Portrait.png?updatedAt=1790829708595\",\n      landscape:\n        \"https://ik.imagekit.io/designali/images/apple/iPad%20Pro/iPad%20Pro%20(M5)%2013_%20-%20Space%20Black%20-%20Landscape.png?updatedAt=1790829708551\",\n    },\n    silver: {\n      portrait:\n        \"https://ik.imagekit.io/designali/images/apple/iPad%20Pro/iPad%20Pro%20(M5)%2013_%20-%20Silver%20-%20Portrait.png?updatedAt=1790829708612\",\n      landscape:\n        \"https://ik.imagekit.io/designali/images/apple/iPad%20Pro/iPad%20Pro%20(M5)%2013_%20-%20Silver%20-%20Landscape.png?updatedAt=1790829708252\",\n    },\n  },\n\n  \"ipad-air\": {\n    purple: {\n      portrait:\n        \"https://ik.imagekit.io/designali/images/apple/iPar%20Air/iPad%20Air%2013_%20(M4)%20-%20Purple%20-%20Portrait.png?updatedAt=1790854444119\",\n      landscape:\n        \"https://ik.imagekit.io/designali/images/apple/iPar%20Air/iPad%20Air%2013_%20(M4)%20-%20Purple%20-%20Landscape.png?updatedAt=1790854443994\",\n    },\n    \"space-grey\": {\n      portrait:\n        \"https://ik.imagekit.io/designali/images/apple/iPar%20Air/iPad%20Air%2013_%20(M4)%20-%20Space%20Gray%20-%20Portrait.png?updatedAt=1790854444061\",\n      landscape:\n        \"https://ik.imagekit.io/designali/images/apple/iPar%20Air/iPad%20Air%2013_%20(M4)%20-%20Space%20Gray%20-%20Landscape.png?updatedAt=1790854443926\",\n    },\n    starlight: {\n      portrait:\n        \"https://ik.imagekit.io/designali/images/apple/iPar%20Air/iPad%20Air%2013_%20(M4)%20-%20Starlight%20-%20Portrait.png?updatedAt=1790854444039\",\n      landscape:\n        \"https://ik.imagekit.io/designali/images/apple/iPar%20Air/iPad%20Air%2013_%20(M4)%20-%20Starlight%20-%20Landscape.png?updatedAt=1790854444037\",\n    },\n    blue: {\n      portrait:\n        \"https://ik.imagekit.io/designali/images/apple/iPar%20Air/iPad%20Air%2013_%20(M4)%20-%20Blue%20-%20Portrait.png?updatedAt=1790854443937\",\n      landscape:\n        \"https://ik.imagekit.io/designali/images/apple/iPar%20Air/iPad%20Air%2013_%20(M4)%20-%20Blue%20-%20Landscape.png?updatedAt=1790854443892\",\n    },\n  },\n};\n\nconst sizeClasses = {\n  sm: \"h-[22rem]\",\n  md: \"h-[30rem]\",\n  lg: \"h-[38rem]\",\n  xl: \"h-[48rem]\",\n};\n\nconst landscapeSizeClasses = {\n  sm: \"h-[16rem]\",\n  md: \"h-[22rem]\",\n  lg: \"h-[28rem]\",\n  xl: \"h-[36rem]\",\n};\n\nconst roundedClasses = {\n  sm: \"rounded-[6px]\",\n  md: \"rounded-[10px]\",\n  lg: \"rounded-[14px]\",\n  xl: \"rounded-[18px]\",\n};\n\nconst landscapeRoundedClasses = {\n  sm: \"rounded-[6px]\",\n  md: \"rounded-[10px]\",\n  lg: \"rounded-[14px]\",\n  xl: \"rounded-[18px]\",\n};\n\nexport function IPad({\n  children,\n  className = \"\",\n  variant = \"ipad-air\",\n  size = \"xl\",\n  orientation = \"portrait\",\n  color = \"blue\",\n}: IpadProps) {\n  const isLandscape = orientation === \"landscape\";\n\n  const variantImages = ipadImages[variant];\n  const defaultImages = variantImages[color] || Object.values(variantImages)[0];\n\n  const frameImage =\n\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-[4/3]\" : \"aspect-[3/4]\"}\n        ${className}\n      `}\n    >\n      <img\n        src={frameImage}\n        alt={\"iPad\"}\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-[5%] overflow-hidden bg-background\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}",
      "type": "registry:ui"
    }
  ]
}