fix: added the iphone 15 pro with video in mdx

content/docs/components/iphone-15-pro.mdx

@@ -46,12 +46,17 @@ npx shadcn@latest add "https://magicui.design/r/iphone-15-pro"
 
 <ComponentPreview name="iphone-15-pro-demo-2" />
 
+### With Video
+
+<ComponentPreview name="iphone-15-pro-demo-3" />
+
 ## Props
 
-| Prop   | Type   | Description                            | Default |
-| ------ | ------ | -------------------------------------- | ------- |
-| width  | number | The width of the iPhone 15 Pro window  | 433     |
-| height | number | The height of the iPhone 15 Pro window | 882     |
-| src    | string | The source of the image to display     |         |
+| Prop     | Type   | Description                            | Default |
+| -------- | ------ | -------------------------------------- | ------- |
+| width    | number | The width of the iPhone 15 Pro window  | 433     |
+| height   | number | The height of the iPhone 15 Pro window | 882     |
+| src      | string | The source of the image to display     |         |
+| videoSrc | string | The source of the video to display     |         |
 
 The `Iphone15Pro` component also accepts all properties of the `SVGElement` type.

public/r/index.json

@@ -475,7 +475,7 @@
     "name": "hyper-text",
     "type": "registry:ui",
     "dependencies": [
-      "framer-motion"
+      "motion"
     ],
     "files": [
       {
@@ -595,6 +595,9 @@
   {
     "name": "typing-animation",
     "type": "registry:ui",
+    "dependencies": [
+      "motion"
+    ],
     "files": [
       {
         "path": "magicui/typing-animation.tsx",

public/r/styles/default/confetti.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "magicui/confetti.tsx",
-      "content": "import type { ReactNode } from \"react\";\nimport React, {\n  createContext,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type {\n  GlobalOptions as ConfettiGlobalOptions,\n  CreateTypes as ConfettiInstance,\n  Options as ConfettiOptions,\n} from \"canvas-confetti\";\nimport confetti from \"canvas-confetti\";\n\nimport { Button, ButtonProps } from \"@/components/ui/button\";\n\ntype Api = {\n  fire: (options?: ConfettiOptions) => void;\n};\n\ntype Props = React.ComponentPropsWithRef<\"canvas\"> & {\n  options?: ConfettiOptions;\n  globalOptions?: ConfettiGlobalOptions;\n  manualstart?: boolean;\n  children?: ReactNode;\n};\n\nexport type ConfettiRef = Api | null;\n\nconst ConfettiContext = createContext<Api>({} as Api);\n\nconst Confetti = forwardRef<ConfettiRef, Props>((props, ref) => {\n  const {\n    options,\n    globalOptions = { resize: true, useWorker: true },\n    manualstart = false,\n    children,\n    ...rest\n  } = props;\n  const instanceRef = useRef<ConfettiInstance | null>(null); // confetti instance\n\n  const canvasRef = useCallback(\n    // https://react.dev/reference/react-dom/components/common#ref-callback\n    // https://reactjs.org/docs/refs-and-the-dom.html#callback-refs\n    (node: HTMLCanvasElement) => {\n      if (node !== null) {\n        // <canvas> is mounted => create the confetti instance\n        if (instanceRef.current) return; // if not already created\n        instanceRef.current = confetti.create(node, {\n          ...globalOptions,\n          resize: true,\n        });\n      } else {\n        // <canvas> is unmounted => reset and destroy instanceRef\n        if (instanceRef.current) {\n          instanceRef.current.reset();\n          instanceRef.current = null;\n        }\n      }\n    },\n    [globalOptions],\n  );\n\n  // `fire` is a function that calls the instance() with `opts` merged with `options`\n  const fire = useCallback(\n    (opts = {}) => instanceRef.current?.({ ...options, ...opts }),\n    [options],\n  );\n\n  const api = useMemo(\n    () => ({\n      fire,\n    }),\n    [fire],\n  );\n\n  useImperativeHandle(ref, () => api, [api]);\n\n  useEffect(() => {\n    if (!manualstart) {\n      fire();\n    }\n  }, [manualstart, fire]);\n\n  return (\n    <ConfettiContext.Provider value={api}>\n      <canvas ref={canvasRef} {...rest} />\n      {children}\n    </ConfettiContext.Provider>\n  );\n});\n\ninterface ConfettiButtonProps extends ButtonProps {\n  options?: ConfettiOptions &\n    ConfettiGlobalOptions & { canvas?: HTMLCanvasElement };\n  children?: React.ReactNode;\n}\n\nfunction ConfettiButton({ options, children, ...props }: ConfettiButtonProps) {\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = rect.left + rect.width / 2;\n    const y = rect.top + rect.height / 2;\n    confetti({\n      ...options,\n      origin: {\n        x: x / window.innerWidth,\n        y: y / window.innerHeight,\n      },\n    });\n  };\n\n  return (\n    <Button onClick={handleClick} {...props}>\n      {children}\n    </Button>\n  );\n}\n\nConfetti.displayName = \"Confetti\";\n\nexport { Confetti, ConfettiButton };\n\nexport default Confetti;\n",
+      "content": "import type { ReactNode } from \"react\";\nimport React, {\n  createContext,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type {\n  GlobalOptions as ConfettiGlobalOptions,\n  CreateTypes as ConfettiInstance,\n  Options as ConfettiOptions,\n} from \"canvas-confetti\";\nimport confetti from \"canvas-confetti\";\n\nimport { Button, ButtonProps } from \"@/components/ui/button\";\n\ntype Api = {\n  fire: (options?: ConfettiOptions) => void;\n};\n\ntype Props = React.ComponentPropsWithRef<\"canvas\"> & {\n  options?: ConfettiOptions;\n  globalOptions?: ConfettiGlobalOptions;\n  manualstart?: boolean;\n  children?: ReactNode;\n};\n\nexport type ConfettiRef = Api | null;\n\nconst ConfettiContext = createContext<Api>({} as Api);\n\n// Define component first\nconst ConfettiComponent = forwardRef<ConfettiRef, Props>((props, ref) => {\n  const {\n    options,\n    globalOptions = { resize: true, useWorker: true },\n    manualstart = false,\n    children,\n    ...rest\n  } = props;\n  const instanceRef = useRef<ConfettiInstance | null>(null);\n\n  const canvasRef = useCallback(\n    (node: HTMLCanvasElement) => {\n      if (node !== null) {\n        if (instanceRef.current) return;\n        instanceRef.current = confetti.create(node, {\n          ...globalOptions,\n          resize: true,\n        });\n      } else {\n        if (instanceRef.current) {\n          instanceRef.current.reset();\n          instanceRef.current = null;\n        }\n      }\n    },\n    [globalOptions],\n  );\n\n  const fire = useCallback(\n    async (opts = {}) => {\n      try {\n        await instanceRef.current?.({ ...options, ...opts });\n      } catch (error) {\n        console.error(\"Confetti error:\", error);\n      }\n    },\n    [options],\n  );\n\n  const api = useMemo(\n    () => ({\n      fire,\n    }),\n    [fire],\n  );\n\n  useImperativeHandle(ref, () => api, [api]);\n\n  useEffect(() => {\n    if (!manualstart) {\n      (async () => {\n        try {\n          await fire();\n        } catch (error) {\n          console.error(\"Confetti effect error:\", error);\n        }\n      })();\n    }\n  }, [manualstart, fire]);\n\n  return (\n    <ConfettiContext.Provider value={api}>\n      <canvas ref={canvasRef} {...rest} />\n      {children}\n    </ConfettiContext.Provider>\n  );\n});\n\n// Set display name immediately\nConfettiComponent.displayName = \"Confetti\";\n\n// Export as Confetti\nexport const Confetti = ConfettiComponent;\n\ninterface ConfettiButtonProps extends ButtonProps {\n  options?: ConfettiOptions &\n    ConfettiGlobalOptions & { canvas?: HTMLCanvasElement };\n  children?: React.ReactNode;\n}\n\nconst ConfettiButtonComponent = ({\n  options,\n  children,\n  ...props\n}: ConfettiButtonProps) => {\n  const handleClick = async (event: React.MouseEvent<HTMLButtonElement>) => {\n    try {\n      const rect = event.currentTarget.getBoundingClientRect();\n      const x = rect.left + rect.width / 2;\n      const y = rect.top + rect.height / 2;\n      await confetti({\n        ...options,\n        origin: {\n          x: x / window.innerWidth,\n          y: y / window.innerHeight,\n        },\n      });\n    } catch (error) {\n      console.error(\"Confetti button error:\", error);\n    }\n  };\n\n  return (\n    <Button onClick={handleClick} {...props}>\n      {children}\n    </Button>\n  );\n};\n\nConfettiButtonComponent.displayName = \"ConfettiButton\";\n\nexport const ConfettiButton = ConfettiButtonComponent;\n\nexport default Confetti;\n",
       "type": "registry:ui",
       "target": ""
     }

public/r/styles/default/dock.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "magicui/dock.tsx",
-      "content": "\"use client\";\n\nimport React, { PropsWithChildren, useRef } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { motion, useMotionValue, useSpring, useTransform } from \"framer-motion\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface DockProps extends VariantProps<typeof dockVariants> {\n  className?: string;\n  magnification?: number;\n  distance?: number;\n  direction?: \"top\" | \"middle\" | \"bottom\";\n  children: React.ReactNode;\n}\n\nconst DEFAULT_MAGNIFICATION = 60;\nconst DEFAULT_DISTANCE = 140;\n\nconst dockVariants = cva(\n  \"supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto mt-8 flex h-[58px] w-max gap-2 rounded-2xl border p-2 backdrop-blur-md\",\n);\n\nconst Dock = React.forwardRef<HTMLDivElement, DockProps>(\n  (\n    {\n      className,\n      children,\n      magnification = DEFAULT_MAGNIFICATION,\n      distance = DEFAULT_DISTANCE,\n      direction = \"bottom\",\n      ...props\n    },\n    ref,\n  ) => {\n    const mouseX = useMotionValue(Infinity);\n\n    const renderChildren = () => {\n      return React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === DockIcon) {\n          return React.cloneElement(child, {\n            ...child.props,\n            mouseX: mouseX,\n            magnification: magnification,\n            distance: distance,\n          });\n        }\n        return child;\n      });\n    };\n\n    return (\n      <motion.div\n        ref={ref}\n        onMouseMove={(e) => mouseX.set(e.pageX)}\n        onMouseLeave={() => mouseX.set(Infinity)}\n        {...props}\n        className={cn(dockVariants({ className }), {\n          \"items-start\": direction === \"top\",\n          \"items-center\": direction === \"middle\",\n          \"items-end\": direction === \"bottom\",\n        })}\n      >\n        {renderChildren()}\n      </motion.div>\n    );\n  },\n);\n\nDock.displayName = \"Dock\";\n\nexport interface DockIconProps {\n  size?: number;\n  magnification?: number;\n  distance?: number;\n  mouseX?: any;\n  className?: string;\n  children?: React.ReactNode;\n  props?: PropsWithChildren;\n}\n\nconst DockIcon = ({\n  size,\n  magnification = DEFAULT_MAGNIFICATION,\n  distance = DEFAULT_DISTANCE,\n  mouseX,\n  className,\n  children,\n  ...props\n}: DockIconProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const distanceCalc = useTransform(mouseX, (val: number) => {\n    const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };\n\n    return val - bounds.x - bounds.width / 2;\n  });\n\n  const widthSync = useTransform(\n    distanceCalc,\n    [-distance, 0, distance],\n    [40, magnification, 40],\n  );\n\n  const width = useSpring(widthSync, {\n    mass: 0.1,\n    stiffness: 150,\n    damping: 12,\n  });\n\n  return (\n    <motion.div\n      ref={ref}\n      style={{ width }}\n      className={cn(\n        \"flex aspect-square cursor-pointer items-center justify-center rounded-full\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </motion.div>\n  );\n};\n\nDockIcon.displayName = \"DockIcon\";\n\nexport { Dock, DockIcon, dockVariants };\n",
+      "content": "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  motion,\n  MotionProps,\n  useMotionValue,\n  useSpring,\n  useTransform,\n} from \"motion/react\";\nimport React, { useRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface DockProps extends VariantProps<typeof dockVariants> {\n  className?: string;\n  magnification?: number;\n  distance?: number;\n  direction?: \"top\" | \"middle\" | \"bottom\";\n  children: React.ReactNode;\n}\n\nconst DEFAULT_MAGNIFICATION = 60;\nconst DEFAULT_DISTANCE = 140;\n\nconst dockVariants = cva(\n  \"supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto mt-8 flex h-[58px] w-max gap-2 rounded-2xl border p-2 backdrop-blur-md\",\n);\n\nconst Dock = React.forwardRef<HTMLDivElement, DockProps>(\n  (\n    {\n      className,\n      children,\n      magnification = DEFAULT_MAGNIFICATION,\n      distance = DEFAULT_DISTANCE,\n      direction = \"bottom\",\n      ...props\n    },\n    ref,\n  ) => {\n    const mouseX = useMotionValue(Infinity);\n\n    const renderChildren = () => {\n      return React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === DockIcon) {\n          return React.cloneElement(child, {\n            ...child.props,\n            mouseX: mouseX,\n            magnification: magnification,\n            distance: distance,\n          });\n        }\n        return child;\n      });\n    };\n\n    return (\n      <motion.div\n        ref={ref}\n        onMouseMove={(e) => mouseX.set(e.pageX)}\n        onMouseLeave={() => mouseX.set(Infinity)}\n        {...props}\n        className={cn(dockVariants({ className }), {\n          \"items-start\": direction === \"top\",\n          \"items-center\": direction === \"middle\",\n          \"items-end\": direction === \"bottom\",\n        })}\n      >\n        {renderChildren()}\n      </motion.div>\n    );\n  },\n);\n\nDock.displayName = \"Dock\";\nexport interface DockIconProps\n  extends Omit<MotionProps & React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  size?: number;\n  magnification?: number;\n  distance?: number;\n  mouseX?: any;\n  className?: string;\n  children?: React.ReactNode;\n}\n\nconst DockIcon = ({\n  size,\n  magnification = DEFAULT_MAGNIFICATION,\n  distance = DEFAULT_DISTANCE,\n  mouseX,\n  className,\n  children,\n  ...props\n}: DockIconProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const distanceCalc = useTransform(mouseX, (val: number) => {\n    const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };\n\n    return val - bounds.x - bounds.width / 2;\n  });\n\n  const widthSync = useTransform(\n    distanceCalc,\n    [-distance, 0, distance],\n    [40, magnification, 40],\n  );\n\n  const width = useSpring(widthSync, {\n    mass: 0.1,\n    stiffness: 150,\n    damping: 12,\n  });\n\n  return (\n    <motion.div\n      ref={ref}\n      style={{ width }}\n      className={cn(\n        \"flex aspect-square cursor-pointer items-center justify-center rounded-full\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </motion.div>\n  );\n};\n\nDockIcon.displayName = \"DockIcon\";\n\nexport { Dock, DockIcon, dockVariants };\n",
       "type": "registry:ui",
       "target": ""
     }