{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "studio-display",
  "type": "registry:ui",
  "files": [
    {
      "path": "registry/designali/ui/apple/studio-display.tsx",
      "content": "import * as React from \"react\";\n\ninterface StudioDisplayProps {\n  children: React.ReactNode;\n  className?: string;\n\n  /** Phone variant/model */\n  variant?: \"studio-display\" | \"studio-display-xdr\";\n\n  /** Phone size */\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n  /** Frame color */\n  color?: \"light\" | \"dark\";\n \n}\n\ntype PhoneVariant = StudioDisplayProps[\"variant\"];\ntype PhoneColor = StudioDisplayProps[\"color\"];\n\nconst studioDisplayImages: Record<\n  NonNullable<PhoneVariant>,\n  Record<NonNullable<PhoneColor>, string>\n> = {\n  \"studio-display\": {\n    dark:\n      \"https://ik.imagekit.io/designali/images/apple/Studio%20Display/Studio%20Display%202026%20On%20Dark%20Background.png?updatedAt=1790829605415\",\n    light:\n      \"https://ik.imagekit.io/designali/images/apple/Studio%20Display/Studio%20Display%202026%20On%20Light%20Background.png?updatedAt=1790829605335\",\n  },\n  \"studio-display-xdr\": {\n    dark:\n      \"https://ik.imagekit.io/designali/images/apple/Studio%20Display/Studio%20Display%20XDR%202026%20On%20Dark%20Background.png?updatedAt=1790829605486\",\n    light:\n      \"https://ik.imagekit.io/designali/images/apple/Studio%20Display/Studio%20Display%20XDR%202026%20On%20Light%20Background.png?updatedAt=1790829605361\",\n  },\n};\n\nconst sizeClasses = {\n  sm: \"h-[16rem]\",\n  md: \"h-[24rem]\",\n  lg: \"h-[32rem]\",\n  xl: \"h-[48rem]\",\n};\n\nconst roundedClasses = {\n  sm: \"rounded-[10px]\",\n  md: \"rounded-[10px]\",\n  lg: \"rounded-[10px]\",\n  xl: \"rounded-[10px]\",\n};\n\nexport function StudioDisplay({\n  children,\n  className = \"\",\n  variant = \"studio-display\",\n  size = \"md\",\n  color = \"dark\", \n}: StudioDisplayProps) {\n  const defaultImage = studioDisplayImages[variant][color];\n  const frameImage = defaultImage;\n\n  return (\n    <div\n      className={`\n        relative inline-block\n        ${sizeClasses[size]}\n        aspect-[16/9]\n        ${className}\n      `}\n    >\n      <img\n        src={frameImage}\n        alt={\"Studio Display\"}\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 left-[15%] right-[15%] top-[3%] bottom-[26%] overflow-hidden bg-background\n          ${roundedClasses[size]}\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"
    }
  ]
}