{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "macbook",
  "type": "registry:ui",
  "files": [
    {
      "path": "registry/designali/ui/apple/macbook.tsx",
      "content": "import * as React from \"react\";\n\ninterface MacbookProps {\n  children?: React.ReactNode;\n  className?: string;\n\n  /** Macbook variant/model */\n  variant?: \"macbook-air\" | \"macbook-pro\" | \"macbook-neo\";\n\n  /** Macbook size */\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n  /** Frame color */\n  color?: \n    | \"sky-blue\" \n    | \"midnight\" \n    | \"starlight\" \n    | \"silver\" \n    | \"black\" \n    | \"indigo\" \n    | \"blush\" \n    | \"citrus\";\n\n  /** Custom Macbook frame image */\n  image?: string;\n\n  /** Image alt text */\n  alt?: string;\n}\n\ntype MacbookVariant = NonNullable<MacbookProps[\"variant\"]>; \n\nconst macbookImages: Record<\n  MacbookVariant,\n  Record<string, string>\n> = {\n  \"macbook-air\": {\n    \"sky-blue\":\n      \"https://ik.imagekit.io/designali/images/apple/MacBook%20Air/MacBook%20Air%20M5%2015-inch%20Sky%20Blue.png?updatedAt=1790829822475\",\n    midnight:\n      \"https://ik.imagekit.io/designali/images/apple/MacBook%20Air/MacBook%20Air%20M5%2015-inch%20Midnight.png?updatedAt=1790829822372\",\n    starlight:\n      \"https://ik.imagekit.io/designali/images/apple/MacBook%20Air/MacBook%20Air%20M5%2015-inch%20Starlight.png?updatedAt=1790829822349\",\n    silver:\n      \"https://ik.imagekit.io/designali/images/apple/MacBook%20Air/MacBook%20Air%20M5%2015-inch%20Silver.png?updatedAt=1790829822257\",\n  },\n\n  \"macbook-pro\": {\n    black:\n      \"https://ik.imagekit.io/designali/images/apple/MacBook%20Pro/MacBook%20Pro%20M5%2016-inch%20Space%20Black.png?updatedAt=1790829853150\",\n    silver:\n      \"https://ik.imagekit.io/designali/images/apple/MacBook%20Pro/MacBook%20Pro%20M5%2016-inch%20Silver.png?updatedAt=1790829852736\",\n  },\n\n  \"macbook-neo\": {\n    silver:\n      \"https://ik.imagekit.io/designali/images/apple/MacBook%20Neo/MacBook%20Neo%20-%20Silver.png?updatedAt=1790829882275\",\n    indigo:\n      \"https://ik.imagekit.io/designali/images/apple/MacBook%20Neo/MacBook%20Neo%20-%20Indigo.png?updatedAt=1790829882148\",\n    blush:\n      \"https://ik.imagekit.io/designali/images/apple/MacBook%20Neo/MacBook%20Neo%20-%20Blush.png?updatedAt=1790829882178\",\n    citrus:\n      \"https://ik.imagekit.io/designali/images/apple/MacBook%20Neo/MacBook%20Neo%20-%20Citrus.png?updatedAt=1790829881978\",\n  },\n};\n\nconst sizeClasses = {\n  sm: \"w-[24rem]\",\n  md: \"w-[36rem]\",\n  lg: \"w-[48rem]\",\n  xl: \"w-[64rem]\",\n};\n\n// Har Macbook model aur uske har size ke liye bilkul alag screen positions (left, right, top, bottom)\nconst screenPositionClasses: Record<MacbookVariant, Record<string, string>> = {\n  \"macbook-air\": {\n    sm: \"left-[8%] right-[8%] top-[8%] bottom-[8%]\",\n    md: \"left-[10%] right-[10%] top-[9.5%] bottom-[9%]\",\n    lg: \"left-[12%] right-[12%] top-[11%] bottom-[10%]\",\n    xl: \"left-[14%] right-[14%] top-[12.5%] bottom-[11%]\",\n  },\n  \"macbook-pro\": {\n    sm: \"left-[7%] right-[7%] top-[7%] bottom-[7%]\",\n    md: \"left-[12%] right-[12%] top-[11%] bottom-[10%]\",\n    lg: \"left-[11%] right-[11%] top-[10%] bottom-[9%]\",\n    xl: \"left-[13%] right-[13%] top-[11.5%] bottom-[10%]\",\n  },\n  \"macbook-neo\": {\n    sm: \"left-[9%] right-[9%] top-[9%] bottom-[8%]\",\n    md: \"left-[14%] right-[14%] top-[14%] bottom-[14%]\",\n    lg: \"left-[13%] right-[13%] top-[12%] bottom-[11%]\",\n    xl: \"left-[15%] right-[15%] top-[13.5%] bottom-[12%]\",\n  },\n};\n\n// Har Macbook model aur uske har size ke liye alag border-radius\nconst roundedClasses: Record<MacbookVariant, Record<string, string>> = {\n  \"macbook-air\": {\n    sm: \"rounded-t-[6px]\",\n    md: \"rounded-t-[10px]\",\n    lg: \"rounded-t-[14px]\",\n    xl: \"rounded-t-[18px]\",\n  },\n  \"macbook-pro\": {\n    sm: \"rounded-t-[4px]\",\n    md: \"rounded-t-[6px]\",\n    lg: \"rounded-t-[16px]\",\n    xl: \"rounded-t-[20px]\",\n  },\n  \"macbook-neo\": {\n    sm: \"rounded-t-[4px]\",\n    md: \"rounded-t-[8px]\",\n    lg: \"rounded-t-[12px]\",\n    xl: \"rounded-t-[16px]\",\n  },\n};\n\nexport function Macbook({\n  children,\n  className = \"\",\n  variant = \"macbook-neo\",\n  size = \"md\",\n  color = \"citrus\", \n}: MacbookProps) {\n  const defaultImages = macbookImages[variant];\n  const frameImage = defaultImages[color] ?? Object.values(defaultImages)[0];\n\n  // Variant aur size ke hisaab se exact independent position aur rounded class lena\n  const currentPosition = screenPositionClasses[variant]?.[size] || screenPositionClasses[\"macbook-air\"].md;\n  const currentRounded = roundedClasses[variant]?.[size] || roundedClasses[\"macbook-air\"].md;\n\n  return (\n    <div\n      className={`\n        relative inline-block\n        ${sizeClasses[size]}\n        aspect-[16/10]\n        ${className}\n      `}\n    >\n      <img\n        src={frameImage}\n        alt={\"Macbook\"}\n        className=\"pointer-events-none absolute inset-0 z-10 h-full w-full select-none object-contain\"\n      />\n\n      {children && (\n        <div\n          className={`\n            absolute overflow-hidden bg-background\n            ${currentPosition}\n            ${currentRounded}\n          `}\n        >\n          <div className=\"h-full w-full overflow-y-auto\">\n            {children}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}",
      "type": "registry:ui"
    }
  ]
}