fix(registry): use type-only imports (fixes TS1484 in stock Vite react-ts apps)

apps/www/app/(marketing)/showcase/[...slug]/page.tsx

@@ -1,4 +1,4 @@
-import { Metadata } from "next"
+import { type Metadata } from "next"
 import { notFound } from "next/navigation"
 
 import { showcaseSource } from "@/lib/source"

apps/www/app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Viewport } from "next"
-import { Metadata } from "next"
+import { type Metadata } from "next"
 import { Provider as JotaiProvider } from "jotai"
 
 import { fontVariables } from "@/lib/fonts"

apps/www/app/robots.ts

@@ -1,4 +1,4 @@
-import { MetadataRoute } from "next"
+import { type MetadataRoute } from "next"
 
 export default function robots(): MetadataRoute.Robots {
   return {

apps/www/components/blur-image.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import Image, { ImageProps } from "next/image"
+import Image, { type ImageProps } from "next/image"
 
 export default function BlurImage(props: ImageProps) {
   const [loading, setLoading] = useState(true)

apps/www/components/contribute.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link"
-import { Page, PageData } from "fumadocs-core/source"
+import { type Page, type PageData } from "fumadocs-core/source"
 import { BugIcon, LightbulbIcon, PencilIcon } from "lucide-react"
 
 import { getGithubFileUrl, getGitHubIssueUrl } from "@/lib/github"

apps/www/components/copy-button.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import { CheckIcon, ClipboardIcon } from "lucide-react"
 
-import { Event, trackEvent } from "@/lib/events"
+import { trackEvent, type Event } from "@/lib/events"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import {

apps/www/components/docs-sidebar.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { NavItemWithChildren } from "@/types"
+import { type NavItemWithChildren } from "@/types"
 
 import { docsConfig } from "@/config/docs"
 import { trackEvent } from "@/lib/events"

apps/www/components/main-nav.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { NavItem } from "@/types"
+import { type NavItem } from "@/types"
 
 import { trackEvent } from "@/lib/events"
 import { cn } from "@/lib/utils"

apps/www/components/mobile-nav.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import Link, { LinkProps } from "next/link"
+import Link, { type LinkProps } from "next/link"
 import { useRouter } from "next/navigation"
 
 import { docsConfig } from "@/config/docs"

apps/www/components/template-preview.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react"
+import { type ReactNode } from "react"
 import Link from "next/link"
 import { ExternalLinkIcon } from "@radix-ui/react-icons"
 

apps/www/components/theme-provider.tsx

@@ -2,7 +2,7 @@
 
 import {
   ThemeProvider as NextThemesProvider,
-  ThemeProviderProps,
+  type ThemeProviderProps,
 } from "next-themes"
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {

apps/www/components/ui/sidebar.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
-import { cva, VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority"
 import { PanelLeftIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"

apps/www/config/docs.ts

@@ -1,4 +1,4 @@
-import { NavItem, NavItemWithChildren } from "@/types"
+import { type NavItem, type NavItemWithChildren } from "@/types"
 
 interface DocsConfig {
   mainNav: NavItem[]

apps/www/lib/rehype-component.ts

@@ -1,6 +1,6 @@
 import fs from "fs"
 import path from "path"
-import { UnistNode, UnistTree } from "types/unist"
+import { type UnistNode, type UnistTree } from "types/unist"
 import { u } from "unist-builder"
 import { visit } from "unist-util-visit"
 

apps/www/lib/rehype-npm-command.ts

@@ -1,4 +1,4 @@
-import { UnistNode, UnistTree } from "types/unist"
+import { type UnistNode, type UnistTree } from "types/unist"
 import { visit } from "unist-util-visit"
 
 export function rehypeNpmCommand() {

apps/www/lib/utils.ts

@@ -1,6 +1,6 @@
 import process from "process"
 import type { Metadata } from "next"
-import clsx, { ClassValue } from "clsx"
+import clsx, { type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 
 import { siteConfig } from "@/config/site"

apps/www/public/llms-full.txt

@@ -3,7 +3,7 @@ Title: Android
 Description: A mockup of an Android device.
 
 --- file: magicui/android.tsx ---
-import { SVGProps } from "react"
+import { type SVGProps } from "react"
 
 export interface AndroidProps extends SVGProps<SVGSVGElement> {
   width?: number
@@ -4427,7 +4427,7 @@ Description: An animated beam of light which travels along the border of its con
 --- file: magicui/border-beam.tsx ---
 "use client"
 
-import { motion, MotionStyle, Transition } from "motion/react"
+import { motion, type MotionStyle, type Transition } from "motion/react"
 
 import { cn } from "@/lib/utils"
 
@@ -4745,7 +4745,7 @@ Description: A client-side version of the tweet card that displays a tweet with
 --- file: magicui/client-tweet-card.tsx ---
 "use client"
 
-import { TweetProps, useTweet } from "react-tweet"
+import { useTweet, type TweetProps } from "react-tweet"
 
 import {
   MagicTweet,
@@ -5057,7 +5057,7 @@ Description: Comic text animation
 --- file: magicui/comic-text.tsx ---
 "use client"
 
-import { CSSProperties } from "react"
+import { type CSSProperties } from "react"
 import { motion } from "motion/react"
 
 import { cn } from "@/lib/utils"
@@ -5638,7 +5638,7 @@ Description: Cool mode effect for buttons, links, and other DOMs
 --- file: magicui/cool-mode.tsx ---
 "use client"
 
-import React, { ReactNode, useEffect, useRef } from "react"
+import React, { useEffect, useRef, type ReactNode } from "react"
 
 export interface BaseParticle {
   element: HTMLElement | SVGSVGElement
@@ -6333,7 +6333,7 @@ Description: An implementation of the MacOS dock using react + tailwindcss + mot
 --- file: magicui/dock.tsx ---
 "use client"
 
-import React, { PropsWithChildren, useRef } from "react"
+import React, { useRef, type PropsWithChildren } from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import {
   motion,
@@ -13188,12 +13188,12 @@ Description: A beautiful neon card effect
 "use client"
 
 import {
-  CSSProperties,
-  ReactElement,
-  ReactNode,
   useEffect,
   useRef,
   useState,
+  type CSSProperties,
+  type ReactElement,
+  type ReactNode,
 } from "react"
 
 import { cn } from "@/lib/utils"
@@ -14992,7 +14992,7 @@ Description: An animated button with a rainbow effect.
 --- file: magicui/rainbow-button.tsx ---
 import React from "react"
 import { Slot } from "@radix-ui/react-slot"
-import { cva, VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
@@ -16062,7 +16062,7 @@ Description: An animated button with ripple useful for user engagement.
 --- file: magicui/ripple-button.tsx ---
 "use client"
 
-import React, { MouseEvent, useEffect, useState } from "react"
+import React, { useEffect, useState, type MouseEvent } from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -17257,7 +17257,7 @@ Description: A customizable, physics-based smooth cursor animation component wit
 --- file: magicui/smooth-cursor.tsx ---
 "use client"
 
-import { FC, useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState, type FC } from "react"
 import { motion, useSpring } from "motion/react"
 
 interface Position {
@@ -17543,7 +17543,12 @@ Description: A dynamic text that generates continuous sparkles with smooth trans
 --- file: magicui/sparkles-text.tsx ---
 "use client"
 
-import { CSSProperties, ReactElement, useEffect, useState } from "react"
+import {
+  useEffect,
+  useState,
+  type CSSProperties,
+  type ReactElement,
+} from "react"
 import { motion } from "motion/react"
 
 import { cn } from "@/lib/utils"
@@ -17713,7 +17718,7 @@ Description: The Spinning Text component animates text in a circular motion with
 "use client"
 
 import React, { type ComponentPropsWithoutRef } from "react"
-import { motion, Transition, Variants } from "motion/react"
+import { motion, type Transition, type Variants } from "motion/react"
 
 import { cn } from "@/lib/utils"
 
@@ -18694,9 +18699,9 @@ import { memo } from "react"
 import {
   AnimatePresence,
   motion,
-  Variants,
   type DOMMotionComponents,
   type MotionProps,
+  type Variants,
 } from "motion/react"
 
 import { cn } from "@/lib/utils"
@@ -20179,7 +20184,12 @@ Description: A component that displays text with a video playing in the backgrou
 --- file: magicui/video-text.tsx ---
 "use client"
 
-import React, { ElementType, ReactNode, useEffect, useState } from "react"
+import React, {
+  useEffect,
+  useState,
+  type ElementType,
+  type ReactNode,
+} from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -20338,7 +20348,7 @@ Description: A card with a time warping background effect.
 --- file: magicui/warp-background.tsx ---
 "use client"
 
-import React, { HTMLAttributes, useCallback, useMemo } from "react"
+import React, { useCallback, useMemo, type HTMLAttributes } from "react"
 import { motion } from "motion/react"
 
 import { cn } from "@/lib/utils"

apps/www/public/r/android.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/magicui/android.tsx",
-      "content": "import { SVGProps } from \"react\"\n\nexport interface AndroidProps extends SVGProps<SVGSVGElement> {\n  width?: number\n  height?: number\n  src?: string\n  videoSrc?: string\n}\n\nexport function Android({\n  width = 433,\n  height = 882,\n  src,\n  videoSrc,\n  ...props\n}: AndroidProps) {\n  return (\n    <svg\n      width={width}\n      height={height}\n      viewBox={`0 0 ${width} ${height}`}\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path\n        d=\"M376 153H378C379.105 153 380 153.895 380 155V249C380 250.105 379.105 251 378 251H376V153Z\"\n        className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n      />\n      <path\n        d=\"M376 301H378C379.105 301 380 301.895 380 303V351C380 352.105 379.105 353 378 353H376V301Z\"\n        className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n      />\n      <path\n        d=\"M0 42C0 18.8041 18.804 0 42 0H336C359.196 0 378 18.804 378 42V788C378 811.196 359.196 830 336 830H42C18.804 830 0 811.196 0 788V42Z\"\n        className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n      />\n      <path\n        d=\"M2 43C2 22.0132 19.0132 5 40 5H338C358.987 5 376 22.0132 376 43V787C376 807.987 358.987 825 338 825H40C19.0132 825 2 807.987 2 787V43Z\"\n        className=\"fill-white dark:fill-[#262626]\"\n      />\n\n      <g clipPath=\"url(#clip0_514_20855)\">\n        <path\n          d=\"M9.25 48C9.25 29.3604 24.3604 14.25 43 14.25H335C353.64 14.25 368.75 29.3604 368.75 48V780C368.75 798.64 353.64 813.75 335 813.75H43C24.3604 813.75 9.25 798.64 9.25 780V48Z\"\n          className=\"fill-[#E5E5E5] stroke-[#E5E5E5] stroke-[0.5] dark:fill-[#404040] dark:stroke-[#404040]\"\n        />\n      </g>\n      <circle\n        cx=\"189\"\n        cy=\"28\"\n        r=\"9\"\n        className=\"fill-white dark:fill-[#262626]\"\n      />\n      <circle\n        cx=\"189\"\n        cy=\"28\"\n        r=\"4\"\n        className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n      />\n      {src && (\n        <image\n          href={src}\n          width=\"360\"\n          height=\"800\"\n          className=\"size-full object-cover\"\n          preserveAspectRatio=\"xMidYMid slice\"\n          clipPath=\"url(#clip0_514_20855)\"\n        />\n      )}\n      {videoSrc && (\n        <foreignObject\n          width=\"380\"\n          height=\"820\"\n          clipPath=\"url(#clip0_514_20855)\"\n          preserveAspectRatio=\"xMidYMid slice\"\n        >\n          <video\n            className=\"size-full object-cover\"\n            src={videoSrc}\n            autoPlay\n            loop\n            muted\n            playsInline\n          />\n        </foreignObject>\n      )}\n      <defs>\n        <clipPath id=\"clip0_514_20855\">\n          <rect\n            width=\"360\"\n            height=\"800\"\n            rx=\"33\"\n            ry=\"25\"\n            className=\"fill-white dark:fill-[#262626]\"\n            transform=\"translate(9 14)\"\n          />\n        </clipPath>\n      </defs>\n    </svg>\n  )\n}\n",
+      "content": "import { type SVGProps } from \"react\"\n\nexport interface AndroidProps extends SVGProps<SVGSVGElement> {\n  width?: number\n  height?: number\n  src?: string\n  videoSrc?: string\n}\n\nexport function Android({\n  width = 433,\n  height = 882,\n  src,\n  videoSrc,\n  ...props\n}: AndroidProps) {\n  return (\n    <svg\n      width={width}\n      height={height}\n      viewBox={`0 0 ${width} ${height}`}\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path\n        d=\"M376 153H378C379.105 153 380 153.895 380 155V249C380 250.105 379.105 251 378 251H376V153Z\"\n        className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n      />\n      <path\n        d=\"M376 301H378C379.105 301 380 301.895 380 303V351C380 352.105 379.105 353 378 353H376V301Z\"\n        className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n      />\n      <path\n        d=\"M0 42C0 18.8041 18.804 0 42 0H336C359.196 0 378 18.804 378 42V788C378 811.196 359.196 830 336 830H42C18.804 830 0 811.196 0 788V42Z\"\n        className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n      />\n      <path\n        d=\"M2 43C2 22.0132 19.0132 5 40 5H338C358.987 5 376 22.0132 376 43V787C376 807.987 358.987 825 338 825H40C19.0132 825 2 807.987 2 787V43Z\"\n        className=\"fill-white dark:fill-[#262626]\"\n      />\n\n      <g clipPath=\"url(#clip0_514_20855)\">\n        <path\n          d=\"M9.25 48C9.25 29.3604 24.3604 14.25 43 14.25H335C353.64 14.25 368.75 29.3604 368.75 48V780C368.75 798.64 353.64 813.75 335 813.75H43C24.3604 813.75 9.25 798.64 9.25 780V48Z\"\n          className=\"fill-[#E5E5E5] stroke-[#E5E5E5] stroke-[0.5] dark:fill-[#404040] dark:stroke-[#404040]\"\n        />\n      </g>\n      <circle\n        cx=\"189\"\n        cy=\"28\"\n        r=\"9\"\n        className=\"fill-white dark:fill-[#262626]\"\n      />\n      <circle\n        cx=\"189\"\n        cy=\"28\"\n        r=\"4\"\n        className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n      />\n      {src && (\n        <image\n          href={src}\n          width=\"360\"\n          height=\"800\"\n          className=\"size-full object-cover\"\n          preserveAspectRatio=\"xMidYMid slice\"\n          clipPath=\"url(#clip0_514_20855)\"\n        />\n      )}\n      {videoSrc && (\n        <foreignObject\n          width=\"380\"\n          height=\"820\"\n          clipPath=\"url(#clip0_514_20855)\"\n          preserveAspectRatio=\"xMidYMid slice\"\n        >\n          <video\n            className=\"size-full object-cover\"\n            src={videoSrc}\n            autoPlay\n            loop\n            muted\n            playsInline\n          />\n        </foreignObject>\n      )}\n      <defs>\n        <clipPath id=\"clip0_514_20855\">\n          <rect\n            width=\"360\"\n            height=\"800\"\n            rx=\"33\"\n            ry=\"25\"\n            className=\"fill-white dark:fill-[#262626]\"\n            transform=\"translate(9 14)\"\n          />\n        </clipPath>\n      </defs>\n    </svg>\n  )\n}\n",
       "type": "registry:ui"
     }
   ]

apps/www/public/r/border-beam.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/magicui/border-beam.tsx",
-      "content": "\"use client\"\n\nimport { motion, MotionStyle, Transition } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface BorderBeamProps {\n  /**\n   * The size of the border beam.\n   */\n  size?: number\n  /**\n   * The duration of the border beam.\n   */\n  duration?: number\n  /**\n   * The delay of the border beam.\n   */\n  delay?: number\n  /**\n   * The color of the border beam from.\n   */\n  colorFrom?: string\n  /**\n   * The color of the border beam to.\n   */\n  colorTo?: string\n  /**\n   * The motion transition of the border beam.\n   */\n  transition?: Transition\n  /**\n   * The class name of the border beam.\n   */\n  className?: string\n  /**\n   * The style of the border beam.\n   */\n  style?: React.CSSProperties\n  /**\n   * Whether to reverse the animation direction.\n   */\n  reverse?: boolean\n  /**\n   * The initial offset position (0-100).\n   */\n  initialOffset?: number\n  /**\n   * The border width of the beam.\n   */\n  borderWidth?: number\n}\n\nexport const BorderBeam = ({\n  className,\n  size = 50,\n  delay = 0,\n  duration = 6,\n  colorFrom = \"#ffaa40\",\n  colorTo = \"#9c40ff\",\n  transition,\n  style,\n  reverse = false,\n  initialOffset = 0,\n  borderWidth = 1,\n}: BorderBeamProps) => {\n  return (\n    <div\n      className=\"pointer-events-none absolute inset-0 rounded-[inherit] border-(length:--border-beam-width) border-transparent mask-[linear-gradient(transparent,transparent),linear-gradient(#000,#000)] mask-intersect [mask-clip:padding-box,border-box]\"\n      style={\n        {\n          \"--border-beam-width\": `${borderWidth}px`,\n        } as React.CSSProperties\n      }\n    >\n      <motion.div\n        className={cn(\n          \"absolute aspect-square\",\n          \"bg-linear-to-l from-(--color-from) via-(--color-to) to-transparent\",\n          className\n        )}\n        style={\n          {\n            width: size,\n            offsetPath: `rect(0 auto auto 0 round ${size}px)`,\n            \"--color-from\": colorFrom,\n            \"--color-to\": colorTo,\n            ...style,\n          } as MotionStyle\n        }\n        initial={{ offsetDistance: `${initialOffset}%` }}\n        animate={{\n          offsetDistance: reverse\n            ? [`${100 - initialOffset}%`, `${-initialOffset}%`]\n            : [`${initialOffset}%`, `${100 + initialOffset}%`],\n        }}\n        transition={{\n          repeat: Infinity,\n          ease: \"linear\",\n          duration,\n          delay: -delay,\n          ...transition,\n        }}\n      />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { motion, type MotionStyle, type Transition } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface BorderBeamProps {\n  /**\n   * The size of the border beam.\n   */\n  size?: number\n  /**\n   * The duration of the border beam.\n   */\n  duration?: number\n  /**\n   * The delay of the border beam.\n   */\n  delay?: number\n  /**\n   * The color of the border beam from.\n   */\n  colorFrom?: string\n  /**\n   * The color of the border beam to.\n   */\n  colorTo?: string\n  /**\n   * The motion transition of the border beam.\n   */\n  transition?: Transition\n  /**\n   * The class name of the border beam.\n   */\n  className?: string\n  /**\n   * The style of the border beam.\n   */\n  style?: React.CSSProperties\n  /**\n   * Whether to reverse the animation direction.\n   */\n  reverse?: boolean\n  /**\n   * The initial offset position (0-100).\n   */\n  initialOffset?: number\n  /**\n   * The border width of the beam.\n   */\n  borderWidth?: number\n}\n\nexport const BorderBeam = ({\n  className,\n  size = 50,\n  delay = 0,\n  duration = 6,\n  colorFrom = \"#ffaa40\",\n  colorTo = \"#9c40ff\",\n  transition,\n  style,\n  reverse = false,\n  initialOffset = 0,\n  borderWidth = 1,\n}: BorderBeamProps) => {\n  return (\n    <div\n      className=\"pointer-events-none absolute inset-0 rounded-[inherit] border-(length:--border-beam-width) border-transparent mask-[linear-gradient(transparent,transparent),linear-gradient(#000,#000)] mask-intersect [mask-clip:padding-box,border-box]\"\n      style={\n        {\n          \"--border-beam-width\": `${borderWidth}px`,\n        } as React.CSSProperties\n      }\n    >\n      <motion.div\n        className={cn(\n          \"absolute aspect-square\",\n          \"bg-linear-to-l from-(--color-from) via-(--color-to) to-transparent\",\n          className\n        )}\n        style={\n          {\n            width: size,\n            offsetPath: `rect(0 auto auto 0 round ${size}px)`,\n            \"--color-from\": colorFrom,\n            \"--color-to\": colorTo,\n            ...style,\n          } as MotionStyle\n        }\n        initial={{ offsetDistance: `${initialOffset}%` }}\n        animate={{\n          offsetDistance: reverse\n            ? [`${100 - initialOffset}%`, `${-initialOffset}%`]\n            : [`${initialOffset}%`, `${100 + initialOffset}%`],\n        }}\n        transition={{\n          repeat: Infinity,\n          ease: \"linear\",\n          duration,\n          delay: -delay,\n          ...transition,\n        }}\n      />\n    </div>\n  )\n}\n",
       "type": "registry:ui"
     }
   ]