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

src/ts-default/Animations/Crosshair/Crosshair.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, RefObject } from 'react';
+import React, { useEffect, useRef, type RefObject } from 'react';
 import { gsap } from 'gsap';
 
 const lerp = (a: number, b: number, n: number): number => (1 - n) * a + n * b;

src/ts-default/Animations/ElectricBorder/ElectricBorder.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useCallback, CSSProperties, ReactNode } from 'react';
+import React, { useEffect, useRef, useCallback, type CSSProperties, type ReactNode } from 'react';
 import './ElectricBorder.css';
 
 interface ElectricBorderProps {

src/ts-default/Animations/GradualBlur/GradualBlur.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useEffect, useRef, useState, useMemo, PropsWithChildren } from 'react';
+import React, { type CSSProperties, useEffect, useRef, useState, useMemo, type PropsWithChildren } from 'react';
 
 import './GradualBlur.css';
 

src/ts-default/Animations/ImageTrail/ImageTrail.tsx

@@ -1,5 +1,5 @@
 import { gsap } from 'gsap';
-import { JSX, useEffect, useRef } from 'react';
+import { type JSX, useEffect, useRef } from 'react';
 import './ImageTrail.css';
 
 function lerp(a: number, b: number, n: number): number {

src/ts-default/Animations/Magnet/Magnet.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, ReactNode, HTMLAttributes } from 'react';
+import React, { useState, useEffect, useRef, type ReactNode, type HTMLAttributes } from 'react';
 
 interface MagnetProps extends HTMLAttributes<HTMLDivElement> {
   children: ReactNode;

src/ts-default/Animations/MagnetLines/MagnetLines.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, CSSProperties } from 'react';
+import React, { useRef, useEffect, type CSSProperties } from 'react';
 import './MagnetLines.css';
 
 interface MagnetLinesProps {

src/ts-default/Animations/OrbitImages/OrbitImages.tsx

@@ -1,7 +1,7 @@
 // Component created by Dominik Koch
 // https://x.com/dominikkoch
 
-import { useMemo, useEffect, useLayoutEffect, useRef, useState, ReactNode } from 'react';
+import { useMemo, useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
 import { motion, useMotionValue, useTransform, animate, MotionValue } from 'motion/react';
 import './OrbitImages.css';
 

src/ts-default/Animations/PixelTrail/PixelTrail.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unknown-property */
 import React, { useMemo } from 'react';
-import { Canvas, useThree, CanvasProps, ThreeEvent } from '@react-three/fiber';
+import { Canvas, useThree, type CanvasProps, type ThreeEvent } from '@react-three/fiber';
 import { shaderMaterial, useTrailTexture } from '@react-three/drei';
 import * as THREE from 'three';
 

src/ts-default/Animations/PixelTransition/PixelTransition.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, CSSProperties } from 'react';
+import React, { useRef, useEffect, useState, type CSSProperties } from 'react';
 import { gsap } from 'gsap';
 import './PixelTransition.css';
 

src/ts-default/Animations/StickerPeel/StickerPeel.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useMemo, CSSProperties } from 'react';
+import { useRef, useEffect, useMemo, type CSSProperties } from 'react';
 import { gsap } from 'gsap';
 import { Draggable } from 'gsap/Draggable';
 import './StickerPeel.css';

src/ts-default/Animations/Strands/Strands.tsx

@@ -1,5 +1,5 @@
 import { Renderer, Program, Mesh, Color, Triangle, RenderTarget } from 'ogl';
-import { useEffect, useRef, CSSProperties } from 'react';
+import { useEffect, useRef, type CSSProperties } from 'react';
 
 import './Strands.css';
 

src/ts-default/Backgrounds/Ballpit/Ballpit.tsx

@@ -22,7 +22,7 @@ import {
   Vector2,
   Vector3,
   WebGLRenderer,
-  WebGLRendererParameters
+  type WebGLRendererParameters
 } from 'three';
 import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
 

src/ts-default/Backgrounds/Beams/Beams.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useImperativeHandle, useEffect, useRef, useMemo, FC, ReactNode } from 'react';
+import { forwardRef, useImperativeHandle, useEffect, useRef, useMemo, type FC, type ReactNode } from 'react';
 
 import * as THREE from 'three';
 

src/ts-default/Backgrounds/Dither/Dither.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unknown-property */
 import { useRef, useEffect, forwardRef } from 'react';
-import { Canvas, useFrame, useThree, ThreeEvent } from '@react-three/fiber';
+import { Canvas, useFrame, useThree, type ThreeEvent } from '@react-three/fiber';
 import { EffectComposer, wrapEffect } from '@react-three/postprocessing';
 import { Effect } from 'postprocessing';
 import * as THREE from 'three';

src/ts-default/Backgrounds/GridMotion/GridMotion.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, FC, ReactNode } from 'react';
+import { useEffect, useRef, type FC, type ReactNode } from 'react';
 import { gsap } from 'gsap';
 import './GridMotion.css';
 

src/ts-default/Backgrounds/Hyperspeed/Hyperspeed.tsx

@@ -1,5 +1,5 @@
 import { BloomEffect, EffectComposer, EffectPass, RenderPass, SMAAEffect, SMAAPreset } from 'postprocessing';
-import { FC, useEffect, useRef } from 'react';
+import { type FC, useEffect, useRef } from 'react';
 import * as THREE from 'three';
 
 import './Hyperspeed.css';

src/ts-default/Backgrounds/Silk/Silk.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react/no-unknown-property */
 import React, { forwardRef, useMemo, useRef, useLayoutEffect, useEffect } from 'react';
-import { Canvas, useFrame, useThree, RootState } from '@react-three/fiber';
+import { Canvas, useFrame, useThree, type RootState } from '@react-three/fiber';
 import { Color, Mesh, ShaderMaterial } from 'three';
-import { IUniform } from 'three';
+import { type IUniform } from 'three';
 
 type NormalizedRGB = [number, number, number];
 

src/ts-default/Backgrounds/Waves/Waves.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, CSSProperties } from 'react';
+import React, { useRef, useEffect, type CSSProperties } from 'react';
 import './Waves.css';
 
 class Grad {

src/ts-default/Components/AnimatedList/AnimatedList.tsx

@@ -1,4 +1,12 @@
-import React, { useRef, useState, useEffect, useCallback, ReactNode, MouseEventHandler, UIEvent } from 'react';
+import React, {
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+  type ReactNode,
+  type MouseEventHandler,
+  type UIEvent
+} from 'react';
 import { motion, useInView } from 'motion/react';
 import './AnimatedList.css';
 

src/ts-default/Components/CardSwap/CardSwap.tsx

@@ -3,9 +3,9 @@ import React, {
   cloneElement,
   forwardRef,
   isValidElement,
-  ReactElement,
-  ReactNode,
-  RefObject,
+  type ReactElement,
+  type ReactNode,
+  type RefObject,
   useEffect,
   useMemo,
   useRef

src/ts-default/Components/Carousel/Carousel.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { motion, PanInfo, useMotionValue, useTransform } from 'motion/react';
+import { motion, type PanInfo, useMotionValue, useTransform } from 'motion/react';
 // replace icons with your own if needed
 import { FiCircle, FiCode, FiFileText, FiLayers, FiLayout } from 'react-icons/fi';
 import './Carousel.css';

src/ts-default/Components/DecayCard/DecayCard.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, ReactNode } from 'react';
+import React, { useEffect, useRef, type ReactNode } from 'react';
 import { gsap } from 'gsap';
 import './DecayCard.css';
 

src/ts-default/Components/FluidGlass/FluidGlass.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unknown-property */
 import * as THREE from 'three';
-import { useRef, useState, useEffect, memo, ReactNode } from 'react';
-import { Canvas, createPortal, useFrame, useThree, ThreeElements } from '@react-three/fiber';
+import { useRef, useState, useEffect, memo, type ReactNode } from 'react';
+import { Canvas, createPortal, useFrame, useThree, type ThreeElements } from '@react-three/fiber';
 import {
   useFBO,
   useGLTF,

src/ts-default/Components/InfiniteMenu/InfiniteMenu.tsx

@@ -1,4 +1,4 @@
-import { FC, useRef, useState, useEffect, MutableRefObject } from 'react';
+import { type FC, useRef, useState, useEffect, type MutableRefObject } from 'react';
 import { mat4, quat, vec2, vec3 } from 'gl-matrix';
 import './InfiniteMenu.css';
 

src/ts-default/Components/LineSidebar/LineSidebar.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback, useEffect, CSSProperties } from 'react';
+import { useRef, useState, useCallback, useEffect, type CSSProperties } from 'react';
 import './LineSidebar.css';
 
 type Falloff = 'linear' | 'smooth' | 'sharp';

src/ts-default/Components/ModelViewer/ModelViewer.tsx

@@ -1,4 +1,4 @@
-import { FC, Suspense, useRef, useLayoutEffect, useEffect, useMemo } from 'react';
+import { type FC, Suspense, useRef, useLayoutEffect, useEffect, useMemo } from 'react';
 import { Canvas, useFrame, useLoader, useThree, invalidate } from '@react-three/fiber';
 import { OrbitControls, useGLTF, useFBX, useProgress, Html, Environment, ContactShadows } from '@react-three/drei';
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';

src/ts-default/Components/OptionWheel/OptionWheel.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback, useEffect, CSSProperties } from 'react';
+import { useRef, useState, useCallback, useEffect, type CSSProperties } from 'react';
 import './OptionWheel.css';
 
 type Side = 'left' | 'right';

src/ts-default/Components/PixelCard/PixelCard.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { JSX } from 'react';
+import { type JSX } from 'react';
 import './PixelCard.css';
 
 class Pixel {

src/ts-default/Components/SpecularButton/SpecularButton.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect, CSSProperties, ReactNode, MouseEventHandler } from 'react';
+import { useRef, useEffect, type CSSProperties, type ReactNode, type MouseEventHandler } from 'react';
 import { Renderer, Program, Mesh, Triangle, Color } from 'ogl';
 import './SpecularButton.css';
 

src/ts-default/Components/Stepper/Stepper.tsx

@@ -1,5 +1,5 @@
-import { AnimatePresence, motion, Variants } from 'motion/react';
-import React, { Children, HTMLAttributes, JSX, ReactNode, useLayoutEffect, useRef, useState } from 'react';
+import { AnimatePresence, motion, type Variants } from 'motion/react';
+import React, { Children, type HTMLAttributes, type JSX, type ReactNode, useLayoutEffect, useRef, useState } from 'react';
 
 import './Stepper.css';
 

src/ts-default/TextAnimations/BlurText/BlurText.tsx

@@ -1,4 +1,4 @@
-import { motion, Transition } from 'motion/react';
+import { motion, type Transition } from 'motion/react';
 import { useEffect, useRef, useState, useMemo } from 'react';
 
 type BlurTextProps = {

src/ts-default/TextAnimations/CircularText/CircularText.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { motion, useAnimation, useMotionValue, MotionValue, Transition } from 'motion/react';
+import { motion, useAnimation, useMotionValue, MotionValue, type Transition } from 'motion/react';
 
 import './CircularText.css';
 interface CircularTextProps {

src/ts-default/TextAnimations/CurvedLoop/CurvedLoop.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useState, useMemo, useId, FC, PointerEvent } from 'react';
+import { useRef, useEffect, useState, useMemo, useId, type FC, type PointerEvent } from 'react';
 import './CurvedLoop.css';
 
 interface CurvedLoopProps {

src/ts-default/TextAnimations/GlitchText/GlitchText.tsx

@@ -1,4 +1,4 @@
-import { FC, CSSProperties } from 'react';
+import { type FC, type CSSProperties } from 'react';
 import './GlitchText.css';
 
 interface GlitchTextProps {

src/ts-default/TextAnimations/GradientText/GradientText.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef, ReactNode } from 'react';
+import { useState, useCallback, useEffect, useRef, type ReactNode } from 'react';
 import { motion, useMotionValue, useAnimationFrame, useTransform } from 'motion/react';
 import './GradientText.css';
 

src/ts-default/TextAnimations/RotatingText/RotatingText.tsx

@@ -4,7 +4,7 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo
 import {
   motion,
   AnimatePresence,
-  Transition,
+  type Transition,
   type VariantLabels,
   type Target,
   type TargetAndTransition

src/ts-default/TextAnimations/ScrollFloat/ScrollFloat.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, ReactNode, RefObject } from 'react';
+import React, { useEffect, useMemo, useRef, type ReactNode, type RefObject } from 'react';
 import { gsap } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 

src/ts-default/TextAnimations/ScrollReveal/ScrollReveal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useMemo, ReactNode, RefObject } from 'react';
+import React, { useEffect, useRef, useMemo, type ReactNode, type RefObject } from 'react';
 import { gsap } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import './ScrollReveal.css';

src/ts-default/TextAnimations/TextType/TextType.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ElementType, useEffect, useRef, useState, createElement, useMemo, useCallback } from 'react';
+import { type ElementType, useEffect, useRef, useState, createElement, useMemo, useCallback } from 'react';
 import { gsap } from 'gsap';
 import './TextType.css';
 

src/ts-default/TextAnimations/TrueFocus/TrueFocus.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, RefObject } from 'react';
+import { useEffect, useRef, useState, type RefObject } from 'react';
 import { motion } from 'motion/react';
 import './TrueFocus.css';
 

src/ts-default/TextAnimations/VariableProximity/VariableProximity.tsx

@@ -1,4 +1,12 @@
-import { forwardRef, useMemo, useRef, useEffect, MutableRefObject, RefObject, HTMLAttributes } from 'react';
+import {
+  forwardRef,
+  useMemo,
+  useRef,
+  useEffect,
+  type MutableRefObject,
+  type RefObject,
+  type HTMLAttributes
+} from 'react';
 import { motion } from 'motion/react';
 import './VariableProximity.css';
 

src/ts-tailwind/Animations/Crosshair/Crosshair.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, RefObject } from 'react';
+import React, { useEffect, useRef, type RefObject } from 'react';
 import { gsap } from 'gsap';
 
 const lerp = (a: number, b: number, n: number): number => (1 - n) * a + n * b;

src/ts-tailwind/Animations/ElectricBorder/ElectricBorder.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useCallback, CSSProperties, ReactNode } from 'react';
+import React, { useEffect, useRef, useCallback, type CSSProperties, type ReactNode } from 'react';
 
 function hexToRgba(hex: string, alpha: number = 1): string {
   if (!hex) return `rgba(0,0,0,${alpha})`;

src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useEffect, useRef, useState, useMemo, PropsWithChildren } from 'react';
+import React, { type CSSProperties, useEffect, useRef, useState, useMemo, type PropsWithChildren } from 'react';
 
 type GradualBlurProps = PropsWithChildren<{
   position?: 'top' | 'bottom' | 'left' | 'right';

src/ts-tailwind/Animations/ImageTrail/ImageTrail.tsx

@@ -1,5 +1,5 @@
 import { gsap } from 'gsap';
-import { JSX, useEffect, useRef } from 'react';
+import { type JSX, useEffect, useRef } from 'react';
 
 function lerp(a: number, b: number, n: number): number {
   return (1 - n) * a + n * b;

src/ts-tailwind/Animations/Magnet/Magnet.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, ReactNode, HTMLAttributes } from 'react';
+import React, { useState, useEffect, useRef, type ReactNode, type HTMLAttributes } from 'react';
 
 interface MagnetProps extends HTMLAttributes<HTMLDivElement> {
   children: ReactNode;

src/ts-tailwind/Animations/MagnetLines/MagnetLines.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, CSSProperties } from 'react';
+import React, { useRef, useEffect, type CSSProperties } from 'react';
 
 interface MagnetLinesProps {
   rows?: number;

src/ts-tailwind/Animations/OrbitImages/OrbitImages.tsx

@@ -1,7 +1,7 @@
 // Component created by Dominik Koch
 // https://x.com/dominikkoch
 
-import { useMemo, useEffect, useLayoutEffect, useRef, useState, ReactNode } from 'react';
+import { useMemo, useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
 import { motion, useMotionValue, useTransform, animate, MotionValue } from 'motion/react';
 
 type OrbitShape =

src/ts-tailwind/Animations/PixelTrail/PixelTrail.tsx

@@ -1,5 +1,5 @@
 import { shaderMaterial, useTrailTexture } from '@react-three/drei';
-import { Canvas, CanvasProps, ThreeEvent, useThree } from '@react-three/fiber';
+import { Canvas, type CanvasProps, type ThreeEvent, useThree } from '@react-three/fiber';
 import React, { useEffect, useMemo } from 'react';
 import * as THREE from 'three';
 

src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, CSSProperties } from 'react';
+import React, { useRef, useEffect, useState, type CSSProperties } from 'react';
 import { gsap } from 'gsap';
 
 interface PixelTransitionProps {

src/ts-tailwind/Animations/ShapeBlur/ShapeBlur.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useRef } from 'react';
+import { type FC, useEffect, useRef } from 'react';
 import * as THREE from 'three';
 
 const vertexShader = /* glsl */ `

src/ts-tailwind/Animations/StickerPeel/StickerPeel.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useMemo, CSSProperties } from 'react';
+import { useRef, useEffect, useMemo, type CSSProperties } from 'react';
 import { gsap } from 'gsap';
 import { Draggable } from 'gsap/Draggable';
 

src/ts-tailwind/Animations/Strands/Strands.tsx

@@ -1,5 +1,5 @@
 import { Renderer, Program, Mesh, Color, Triangle, RenderTarget } from 'ogl';
-import { useEffect, useRef, CSSProperties } from 'react';
+import { useEffect, useRef, type CSSProperties } from 'react';
 
 const MAX_STRANDS = 12;
 const MAX_COLORS = 8;

src/ts-tailwind/Backgrounds/Ballpit/Ballpit.tsx

@@ -22,7 +22,7 @@ import {
   Vector2,
   Vector3,
   WebGLRenderer,
-  WebGLRendererParameters
+  type WebGLRendererParameters
 } from 'three';
 import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
 

src/ts-tailwind/Backgrounds/Beams/Beams.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useImperativeHandle, useEffect, useRef, useMemo, FC, ReactNode } from 'react';
+import { forwardRef, useImperativeHandle, useEffect, useRef, useMemo, type FC, type ReactNode } from 'react';
 
 import * as THREE from 'three';