From cb8bde6f5756adb02284e0d4e2904c9442fd5776 Mon Sep 17 00:00:00 2001 From: Lin Junrong Date: Fri, 31 Jul 2026 12:50:31 +0800 Subject: [PATCH] fix(ts): import types with type-only specifiers in TS variants The TS-CSS and TS-TW variants shipped through the registry import type-only bindings (ReactNode, FC, CSSProperties, Transition, IUniform, RootState, ThreeEvent, ...) as value imports. TypeScript's own `--template react-ts` scaffold enables `verbatimModuleSyntax`, so every one of these is a hard TS1484 compile error the moment someone installs a TS variant into a stock Vite app. Adds the inline `type` modifier at 132 specifiers across 83 files, matching the style already used elsewhere in the same imports (e.g. RotatingText already writes `type VariantLabels`). No runtime or type semantics change. --- src/ts-default/Animations/Crosshair/Crosshair.tsx | 2 +- .../Animations/ElectricBorder/ElectricBorder.tsx | 2 +- src/ts-default/Animations/GradualBlur/GradualBlur.tsx | 2 +- src/ts-default/Animations/ImageTrail/ImageTrail.tsx | 2 +- src/ts-default/Animations/Magnet/Magnet.tsx | 2 +- src/ts-default/Animations/MagnetLines/MagnetLines.tsx | 2 +- src/ts-default/Animations/OrbitImages/OrbitImages.tsx | 2 +- src/ts-default/Animations/PixelTrail/PixelTrail.tsx | 2 +- .../Animations/PixelTransition/PixelTransition.tsx | 2 +- src/ts-default/Animations/StickerPeel/StickerPeel.tsx | 2 +- src/ts-default/Animations/Strands/Strands.tsx | 2 +- src/ts-default/Backgrounds/Ballpit/Ballpit.tsx | 2 +- src/ts-default/Backgrounds/Beams/Beams.tsx | 2 +- src/ts-default/Backgrounds/Dither/Dither.tsx | 2 +- src/ts-default/Backgrounds/GridMotion/GridMotion.tsx | 2 +- src/ts-default/Backgrounds/Hyperspeed/Hyperspeed.tsx | 2 +- src/ts-default/Backgrounds/Silk/Silk.tsx | 4 ++-- src/ts-default/Backgrounds/Waves/Waves.tsx | 2 +- .../Components/AnimatedList/AnimatedList.tsx | 10 +++++++++- src/ts-default/Components/CardSwap/CardSwap.tsx | 6 +++--- src/ts-default/Components/Carousel/Carousel.tsx | 2 +- src/ts-default/Components/DecayCard/DecayCard.tsx | 2 +- src/ts-default/Components/FluidGlass/FluidGlass.tsx | 4 ++-- .../Components/InfiniteMenu/InfiniteMenu.tsx | 2 +- src/ts-default/Components/LineSidebar/LineSidebar.tsx | 2 +- src/ts-default/Components/ModelViewer/ModelViewer.tsx | 2 +- src/ts-default/Components/OptionWheel/OptionWheel.tsx | 2 +- src/ts-default/Components/PixelCard/PixelCard.tsx | 2 +- .../Components/SpecularButton/SpecularButton.tsx | 2 +- src/ts-default/Components/Stepper/Stepper.tsx | 4 ++-- src/ts-default/TextAnimations/BlurText/BlurText.tsx | 2 +- .../TextAnimations/CircularText/CircularText.tsx | 2 +- .../TextAnimations/CurvedLoop/CurvedLoop.tsx | 2 +- .../TextAnimations/GlitchText/GlitchText.tsx | 2 +- .../TextAnimations/GradientText/GradientText.tsx | 2 +- .../TextAnimations/RotatingText/RotatingText.tsx | 2 +- .../TextAnimations/ScrollFloat/ScrollFloat.tsx | 2 +- .../TextAnimations/ScrollReveal/ScrollReveal.tsx | 2 +- src/ts-default/TextAnimations/TextType/TextType.tsx | 2 +- src/ts-default/TextAnimations/TrueFocus/TrueFocus.tsx | 2 +- .../VariableProximity/VariableProximity.tsx | 10 +++++++++- src/ts-tailwind/Animations/Crosshair/Crosshair.tsx | 2 +- .../Animations/ElectricBorder/ElectricBorder.tsx | 2 +- src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx | 2 +- src/ts-tailwind/Animations/ImageTrail/ImageTrail.tsx | 2 +- src/ts-tailwind/Animations/Magnet/Magnet.tsx | 2 +- src/ts-tailwind/Animations/MagnetLines/MagnetLines.tsx | 2 +- src/ts-tailwind/Animations/OrbitImages/OrbitImages.tsx | 2 +- src/ts-tailwind/Animations/PixelTrail/PixelTrail.tsx | 2 +- .../Animations/PixelTransition/PixelTransition.tsx | 2 +- src/ts-tailwind/Animations/ShapeBlur/ShapeBlur.tsx | 2 +- src/ts-tailwind/Animations/StickerPeel/StickerPeel.tsx | 2 +- src/ts-tailwind/Animations/Strands/Strands.tsx | 2 +- src/ts-tailwind/Backgrounds/Ballpit/Ballpit.tsx | 2 +- src/ts-tailwind/Backgrounds/Beams/Beams.tsx | 2 +- src/ts-tailwind/Backgrounds/Dither/Dither.tsx | 2 +- src/ts-tailwind/Backgrounds/GridMotion/GridMotion.tsx | 2 +- src/ts-tailwind/Backgrounds/Hyperspeed/Hyperspeed.tsx | 2 +- src/ts-tailwind/Backgrounds/Silk/Silk.tsx | 4 ++-- src/ts-tailwind/Backgrounds/Waves/Waves.tsx | 2 +- .../Components/AnimatedList/AnimatedList.tsx | 10 +++++++++- src/ts-tailwind/Components/CardSwap/CardSwap.tsx | 6 +++--- src/ts-tailwind/Components/Carousel/Carousel.tsx | 4 ++-- src/ts-tailwind/Components/DecayCard/DecayCard.tsx | 2 +- src/ts-tailwind/Components/FluidGlass/FluidGlass.tsx | 4 ++-- .../Components/InfiniteMenu/InfiniteMenu.tsx | 2 +- src/ts-tailwind/Components/LineSidebar/LineSidebar.tsx | 2 +- src/ts-tailwind/Components/ModelViewer/ModelViewer.tsx | 2 +- src/ts-tailwind/Components/OptionWheel/OptionWheel.tsx | 2 +- src/ts-tailwind/Components/PixelCard/PixelCard.tsx | 2 +- .../Components/SpecularButton/SpecularButton.tsx | 2 +- src/ts-tailwind/Components/Stepper/Stepper.tsx | 4 ++-- src/ts-tailwind/TextAnimations/BlurText/BlurText.tsx | 2 +- .../TextAnimations/CircularText/CircularText.tsx | 2 +- .../TextAnimations/CurvedLoop/CurvedLoop.tsx | 2 +- .../TextAnimations/GlitchText/GlitchText.tsx | 2 +- .../TextAnimations/GradientText/GradientText.tsx | 2 +- .../TextAnimations/RotatingText/RotatingText.tsx | 2 +- .../TextAnimations/ScrollFloat/ScrollFloat.tsx | 2 +- .../TextAnimations/ScrollReveal/ScrollReveal.tsx | 2 +- src/ts-tailwind/TextAnimations/Shuffle/Shuffle.tsx | 2 +- src/ts-tailwind/TextAnimations/TextType/TextType.tsx | 2 +- .../VariableProximity/VariableProximity.tsx | 10 +++++++++- 83 files changed, 126 insertions(+), 94 deletions(-) diff --git a/src/ts-default/Animations/Crosshair/Crosshair.tsx b/src/ts-default/Animations/Crosshair/Crosshair.tsx index c3fad6f5..3fba42ff 100644 --- a/src/ts-default/Animations/Crosshair/Crosshair.tsx +++ b/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; diff --git a/src/ts-default/Animations/ElectricBorder/ElectricBorder.tsx b/src/ts-default/Animations/ElectricBorder/ElectricBorder.tsx index ab72ca53..56671af0 100644 --- a/src/ts-default/Animations/ElectricBorder/ElectricBorder.tsx +++ 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 { diff --git a/src/ts-default/Animations/GradualBlur/GradualBlur.tsx b/src/ts-default/Animations/GradualBlur/GradualBlur.tsx index 8f4f5be3..49e26e06 100644 --- a/src/ts-default/Animations/GradualBlur/GradualBlur.tsx +++ b/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'; diff --git a/src/ts-default/Animations/ImageTrail/ImageTrail.tsx b/src/ts-default/Animations/ImageTrail/ImageTrail.tsx index c789cf7e..0073019c 100644 --- a/src/ts-default/Animations/ImageTrail/ImageTrail.tsx +++ b/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 { diff --git a/src/ts-default/Animations/Magnet/Magnet.tsx b/src/ts-default/Animations/Magnet/Magnet.tsx index 295c8120..4cd7f147 100644 --- a/src/ts-default/Animations/Magnet/Magnet.tsx +++ b/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 { children: ReactNode; diff --git a/src/ts-default/Animations/MagnetLines/MagnetLines.tsx b/src/ts-default/Animations/MagnetLines/MagnetLines.tsx index ac2f5237..8014e0fe 100644 --- a/src/ts-default/Animations/MagnetLines/MagnetLines.tsx +++ b/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 { diff --git a/src/ts-default/Animations/OrbitImages/OrbitImages.tsx b/src/ts-default/Animations/OrbitImages/OrbitImages.tsx index 698fd33a..34b96936 100644 --- a/src/ts-default/Animations/OrbitImages/OrbitImages.tsx +++ b/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'; diff --git a/src/ts-default/Animations/PixelTrail/PixelTrail.tsx b/src/ts-default/Animations/PixelTrail/PixelTrail.tsx index 8097cb2b..d6bfa0ef 100644 --- a/src/ts-default/Animations/PixelTrail/PixelTrail.tsx +++ b/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'; diff --git a/src/ts-default/Animations/PixelTransition/PixelTransition.tsx b/src/ts-default/Animations/PixelTransition/PixelTransition.tsx index 49c8430e..e502b71e 100644 --- a/src/ts-default/Animations/PixelTransition/PixelTransition.tsx +++ b/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'; diff --git a/src/ts-default/Animations/StickerPeel/StickerPeel.tsx b/src/ts-default/Animations/StickerPeel/StickerPeel.tsx index 3ed1dd16..ad1a53e8 100644 --- a/src/ts-default/Animations/StickerPeel/StickerPeel.tsx +++ b/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'; diff --git a/src/ts-default/Animations/Strands/Strands.tsx b/src/ts-default/Animations/Strands/Strands.tsx index 825ba7e0..a010cab4 100644 --- a/src/ts-default/Animations/Strands/Strands.tsx +++ b/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'; diff --git a/src/ts-default/Backgrounds/Ballpit/Ballpit.tsx b/src/ts-default/Backgrounds/Ballpit/Ballpit.tsx index 3f9700f6..e2b20d61 100644 --- a/src/ts-default/Backgrounds/Ballpit/Ballpit.tsx +++ b/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'; diff --git a/src/ts-default/Backgrounds/Beams/Beams.tsx b/src/ts-default/Backgrounds/Beams/Beams.tsx index 63c0fa13..a0762b9a 100644 --- a/src/ts-default/Backgrounds/Beams/Beams.tsx +++ b/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'; diff --git a/src/ts-default/Backgrounds/Dither/Dither.tsx b/src/ts-default/Backgrounds/Dither/Dither.tsx index 21078970..334d0792 100644 --- a/src/ts-default/Backgrounds/Dither/Dither.tsx +++ b/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'; diff --git a/src/ts-default/Backgrounds/GridMotion/GridMotion.tsx b/src/ts-default/Backgrounds/GridMotion/GridMotion.tsx index 81800ecd..79a18712 100644 --- a/src/ts-default/Backgrounds/GridMotion/GridMotion.tsx +++ b/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'; diff --git a/src/ts-default/Backgrounds/Hyperspeed/Hyperspeed.tsx b/src/ts-default/Backgrounds/Hyperspeed/Hyperspeed.tsx index b4fd887d..7f3de13b 100644 --- a/src/ts-default/Backgrounds/Hyperspeed/Hyperspeed.tsx +++ b/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'; diff --git a/src/ts-default/Backgrounds/Silk/Silk.tsx b/src/ts-default/Backgrounds/Silk/Silk.tsx index 2305fea6..724749f7 100644 --- a/src/ts-default/Backgrounds/Silk/Silk.tsx +++ b/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]; diff --git a/src/ts-default/Backgrounds/Waves/Waves.tsx b/src/ts-default/Backgrounds/Waves/Waves.tsx index a240c3d1..c87e0b1e 100644 --- a/src/ts-default/Backgrounds/Waves/Waves.tsx +++ b/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 { diff --git a/src/ts-default/Components/AnimatedList/AnimatedList.tsx b/src/ts-default/Components/AnimatedList/AnimatedList.tsx index cd7e0aeb..5e4a19ef 100644 --- a/src/ts-default/Components/AnimatedList/AnimatedList.tsx +++ b/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'; diff --git a/src/ts-default/Components/CardSwap/CardSwap.tsx b/src/ts-default/Components/CardSwap/CardSwap.tsx index b711a090..cfeeac4c 100644 --- a/src/ts-default/Components/CardSwap/CardSwap.tsx +++ b/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 diff --git a/src/ts-default/Components/Carousel/Carousel.tsx b/src/ts-default/Components/Carousel/Carousel.tsx index a075e4c7..b884496f 100644 --- a/src/ts-default/Components/Carousel/Carousel.tsx +++ b/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'; diff --git a/src/ts-default/Components/DecayCard/DecayCard.tsx b/src/ts-default/Components/DecayCard/DecayCard.tsx index 3e4517cc..5f351170 100644 --- a/src/ts-default/Components/DecayCard/DecayCard.tsx +++ b/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'; diff --git a/src/ts-default/Components/FluidGlass/FluidGlass.tsx b/src/ts-default/Components/FluidGlass/FluidGlass.tsx index c1d256bd..a17a7d9a 100644 --- a/src/ts-default/Components/FluidGlass/FluidGlass.tsx +++ b/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, diff --git a/src/ts-default/Components/InfiniteMenu/InfiniteMenu.tsx b/src/ts-default/Components/InfiniteMenu/InfiniteMenu.tsx index a7fa2131..37a91c1f 100644 --- a/src/ts-default/Components/InfiniteMenu/InfiniteMenu.tsx +++ b/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'; diff --git a/src/ts-default/Components/LineSidebar/LineSidebar.tsx b/src/ts-default/Components/LineSidebar/LineSidebar.tsx index 9467f025..54f8afd7 100644 --- a/src/ts-default/Components/LineSidebar/LineSidebar.tsx +++ b/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'; diff --git a/src/ts-default/Components/ModelViewer/ModelViewer.tsx b/src/ts-default/Components/ModelViewer/ModelViewer.tsx index e469fa64..565f79b7 100644 --- a/src/ts-default/Components/ModelViewer/ModelViewer.tsx +++ b/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'; diff --git a/src/ts-default/Components/OptionWheel/OptionWheel.tsx b/src/ts-default/Components/OptionWheel/OptionWheel.tsx index d4074047..e58caaee 100644 --- a/src/ts-default/Components/OptionWheel/OptionWheel.tsx +++ b/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'; diff --git a/src/ts-default/Components/PixelCard/PixelCard.tsx b/src/ts-default/Components/PixelCard/PixelCard.tsx index ae4aa6a0..b35ad650 100644 --- a/src/ts-default/Components/PixelCard/PixelCard.tsx +++ b/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 { diff --git a/src/ts-default/Components/SpecularButton/SpecularButton.tsx b/src/ts-default/Components/SpecularButton/SpecularButton.tsx index e8175ff7..52bb336f 100644 --- a/src/ts-default/Components/SpecularButton/SpecularButton.tsx +++ b/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'; diff --git a/src/ts-default/Components/Stepper/Stepper.tsx b/src/ts-default/Components/Stepper/Stepper.tsx index 2c1269fe..17c437cd 100644 --- a/src/ts-default/Components/Stepper/Stepper.tsx +++ b/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'; diff --git a/src/ts-default/TextAnimations/BlurText/BlurText.tsx b/src/ts-default/TextAnimations/BlurText/BlurText.tsx index 5726907f..a7765cd9 100644 --- a/src/ts-default/TextAnimations/BlurText/BlurText.tsx +++ b/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 = { diff --git a/src/ts-default/TextAnimations/CircularText/CircularText.tsx b/src/ts-default/TextAnimations/CircularText/CircularText.tsx index 535bd4e1..2cfddd47 100644 --- a/src/ts-default/TextAnimations/CircularText/CircularText.tsx +++ b/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 { diff --git a/src/ts-default/TextAnimations/CurvedLoop/CurvedLoop.tsx b/src/ts-default/TextAnimations/CurvedLoop/CurvedLoop.tsx index a3a65f25..524dcfdc 100644 --- a/src/ts-default/TextAnimations/CurvedLoop/CurvedLoop.tsx +++ b/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 { diff --git a/src/ts-default/TextAnimations/GlitchText/GlitchText.tsx b/src/ts-default/TextAnimations/GlitchText/GlitchText.tsx index 7a5a2065..2a259c38 100644 --- a/src/ts-default/TextAnimations/GlitchText/GlitchText.tsx +++ b/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 { diff --git a/src/ts-default/TextAnimations/GradientText/GradientText.tsx b/src/ts-default/TextAnimations/GradientText/GradientText.tsx index e8e870dd..50d6948a 100644 --- a/src/ts-default/TextAnimations/GradientText/GradientText.tsx +++ b/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'; diff --git a/src/ts-default/TextAnimations/RotatingText/RotatingText.tsx b/src/ts-default/TextAnimations/RotatingText/RotatingText.tsx index 93fe480e..3fdf112f 100644 --- a/src/ts-default/TextAnimations/RotatingText/RotatingText.tsx +++ b/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 diff --git a/src/ts-default/TextAnimations/ScrollFloat/ScrollFloat.tsx b/src/ts-default/TextAnimations/ScrollFloat/ScrollFloat.tsx index f3627b50..1f6a95f8 100644 --- a/src/ts-default/TextAnimations/ScrollFloat/ScrollFloat.tsx +++ b/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'; diff --git a/src/ts-default/TextAnimations/ScrollReveal/ScrollReveal.tsx b/src/ts-default/TextAnimations/ScrollReveal/ScrollReveal.tsx index 9386495f..a19ae6d0 100644 --- a/src/ts-default/TextAnimations/ScrollReveal/ScrollReveal.tsx +++ b/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'; diff --git a/src/ts-default/TextAnimations/TextType/TextType.tsx b/src/ts-default/TextAnimations/TextType/TextType.tsx index e334fced..c700f91d 100644 --- a/src/ts-default/TextAnimations/TextType/TextType.tsx +++ b/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'; diff --git a/src/ts-default/TextAnimations/TrueFocus/TrueFocus.tsx b/src/ts-default/TextAnimations/TrueFocus/TrueFocus.tsx index ab0112e3..84fe7528 100644 --- a/src/ts-default/TextAnimations/TrueFocus/TrueFocus.tsx +++ b/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'; diff --git a/src/ts-default/TextAnimations/VariableProximity/VariableProximity.tsx b/src/ts-default/TextAnimations/VariableProximity/VariableProximity.tsx index ee13ade1..76921d29 100644 --- a/src/ts-default/TextAnimations/VariableProximity/VariableProximity.tsx +++ b/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'; diff --git a/src/ts-tailwind/Animations/Crosshair/Crosshair.tsx b/src/ts-tailwind/Animations/Crosshair/Crosshair.tsx index 8f02ea18..ce252e10 100644 --- a/src/ts-tailwind/Animations/Crosshair/Crosshair.tsx +++ b/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; diff --git a/src/ts-tailwind/Animations/ElectricBorder/ElectricBorder.tsx b/src/ts-tailwind/Animations/ElectricBorder/ElectricBorder.tsx index a884d392..90d84031 100644 --- a/src/ts-tailwind/Animations/ElectricBorder/ElectricBorder.tsx +++ 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})`; diff --git a/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx b/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx index d43eb13a..717b6f1d 100644 --- a/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx +++ b/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'; diff --git a/src/ts-tailwind/Animations/ImageTrail/ImageTrail.tsx b/src/ts-tailwind/Animations/ImageTrail/ImageTrail.tsx index aada4cfe..6b3554d4 100644 --- a/src/ts-tailwind/Animations/ImageTrail/ImageTrail.tsx +++ b/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; diff --git a/src/ts-tailwind/Animations/Magnet/Magnet.tsx b/src/ts-tailwind/Animations/Magnet/Magnet.tsx index 295c8120..4cd7f147 100644 --- a/src/ts-tailwind/Animations/Magnet/Magnet.tsx +++ 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 { children: ReactNode; diff --git a/src/ts-tailwind/Animations/MagnetLines/MagnetLines.tsx b/src/ts-tailwind/Animations/MagnetLines/MagnetLines.tsx index 0ca358a4..502f2573 100644 --- a/src/ts-tailwind/Animations/MagnetLines/MagnetLines.tsx +++ b/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; diff --git a/src/ts-tailwind/Animations/OrbitImages/OrbitImages.tsx b/src/ts-tailwind/Animations/OrbitImages/OrbitImages.tsx index 7c02d4c6..95556994 100644 --- a/src/ts-tailwind/Animations/OrbitImages/OrbitImages.tsx +++ b/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 = diff --git a/src/ts-tailwind/Animations/PixelTrail/PixelTrail.tsx b/src/ts-tailwind/Animations/PixelTrail/PixelTrail.tsx index 6d10e79a..be3d6d6b 100644 --- a/src/ts-tailwind/Animations/PixelTrail/PixelTrail.tsx +++ b/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'; diff --git a/src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx b/src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx index 77bd0a31..1a6ebd4a 100644 --- a/src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx +++ b/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 { diff --git a/src/ts-tailwind/Animations/ShapeBlur/ShapeBlur.tsx b/src/ts-tailwind/Animations/ShapeBlur/ShapeBlur.tsx index 3c109927..7a261728 100644 --- a/src/ts-tailwind/Animations/ShapeBlur/ShapeBlur.tsx +++ b/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 */ ` diff --git a/src/ts-tailwind/Animations/StickerPeel/StickerPeel.tsx b/src/ts-tailwind/Animations/StickerPeel/StickerPeel.tsx index c3240d94..35d05a05 100644 --- a/src/ts-tailwind/Animations/StickerPeel/StickerPeel.tsx +++ b/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'; diff --git a/src/ts-tailwind/Animations/Strands/Strands.tsx b/src/ts-tailwind/Animations/Strands/Strands.tsx index a7dfb04e..5f33f166 100644 --- a/src/ts-tailwind/Animations/Strands/Strands.tsx +++ b/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; diff --git a/src/ts-tailwind/Backgrounds/Ballpit/Ballpit.tsx b/src/ts-tailwind/Backgrounds/Ballpit/Ballpit.tsx index 05eb478e..6a2ad092 100644 --- a/src/ts-tailwind/Backgrounds/Ballpit/Ballpit.tsx +++ b/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'; diff --git a/src/ts-tailwind/Backgrounds/Beams/Beams.tsx b/src/ts-tailwind/Backgrounds/Beams/Beams.tsx index 64b5aa6f..d7e2224d 100644 --- a/src/ts-tailwind/Backgrounds/Beams/Beams.tsx +++ b/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'; diff --git a/src/ts-tailwind/Backgrounds/Dither/Dither.tsx b/src/ts-tailwind/Backgrounds/Dither/Dither.tsx index 8d8f09cd..0e799b3c 100644 --- a/src/ts-tailwind/Backgrounds/Dither/Dither.tsx +++ b/src/ts-tailwind/Backgrounds/Dither/Dither.tsx @@ -1,6 +1,6 @@ /* eslint-disable react/no-unknown-property */ import { useRef, useState, 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'; diff --git a/src/ts-tailwind/Backgrounds/GridMotion/GridMotion.tsx b/src/ts-tailwind/Backgrounds/GridMotion/GridMotion.tsx index dd0ec907..5f287320 100644 --- a/src/ts-tailwind/Backgrounds/GridMotion/GridMotion.tsx +++ b/src/ts-tailwind/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'; interface GridMotionProps { diff --git a/src/ts-tailwind/Backgrounds/Hyperspeed/Hyperspeed.tsx b/src/ts-tailwind/Backgrounds/Hyperspeed/Hyperspeed.tsx index c0729e2f..accca25c 100644 --- a/src/ts-tailwind/Backgrounds/Hyperspeed/Hyperspeed.tsx +++ b/src/ts-tailwind/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'; interface Distortion { diff --git a/src/ts-tailwind/Backgrounds/Silk/Silk.tsx b/src/ts-tailwind/Backgrounds/Silk/Silk.tsx index 2305fea6..724749f7 100644 --- a/src/ts-tailwind/Backgrounds/Silk/Silk.tsx +++ b/src/ts-tailwind/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]; diff --git a/src/ts-tailwind/Backgrounds/Waves/Waves.tsx b/src/ts-tailwind/Backgrounds/Waves/Waves.tsx index d33f456d..7dacfc39 100644 --- a/src/ts-tailwind/Backgrounds/Waves/Waves.tsx +++ b/src/ts-tailwind/Backgrounds/Waves/Waves.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useEffect, CSSProperties } from 'react'; +import React, { useRef, useEffect, type CSSProperties } from 'react'; class Grad { x: number; diff --git a/src/ts-tailwind/Components/AnimatedList/AnimatedList.tsx b/src/ts-tailwind/Components/AnimatedList/AnimatedList.tsx index 944c80a3..9b002215 100644 --- a/src/ts-tailwind/Components/AnimatedList/AnimatedList.tsx +++ b/src/ts-tailwind/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'; interface AnimatedItemProps { diff --git a/src/ts-tailwind/Components/CardSwap/CardSwap.tsx b/src/ts-tailwind/Components/CardSwap/CardSwap.tsx index f3767600..11d344aa 100644 --- a/src/ts-tailwind/Components/CardSwap/CardSwap.tsx +++ b/src/ts-tailwind/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 diff --git a/src/ts-tailwind/Components/Carousel/Carousel.tsx b/src/ts-tailwind/Components/Carousel/Carousel.tsx index 78c05fb5..93998067 100644 --- a/src/ts-tailwind/Components/Carousel/Carousel.tsx +++ b/src/ts-tailwind/Components/Carousel/Carousel.tsx @@ -1,6 +1,6 @@ import { useEffect, useMemo, useRef, useState } from 'react'; -import { motion, PanInfo, useMotionValue, useTransform } from 'motion/react'; -import React, { JSX } from 'react'; +import { motion, type PanInfo, useMotionValue, useTransform } from 'motion/react'; +import React, { type JSX } from 'react'; // replace icons with your own if needed import { FiCircle, FiCode, FiFileText, FiLayers, FiLayout } from 'react-icons/fi'; diff --git a/src/ts-tailwind/Components/DecayCard/DecayCard.tsx b/src/ts-tailwind/Components/DecayCard/DecayCard.tsx index 2dbd2e2a..bcf0f773 100644 --- a/src/ts-tailwind/Components/DecayCard/DecayCard.tsx +++ b/src/ts-tailwind/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'; interface DecayCardProps { diff --git a/src/ts-tailwind/Components/FluidGlass/FluidGlass.tsx b/src/ts-tailwind/Components/FluidGlass/FluidGlass.tsx index c1d256bd..a17a7d9a 100644 --- a/src/ts-tailwind/Components/FluidGlass/FluidGlass.tsx +++ b/src/ts-tailwind/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, diff --git a/src/ts-tailwind/Components/InfiniteMenu/InfiniteMenu.tsx b/src/ts-tailwind/Components/InfiniteMenu/InfiniteMenu.tsx index 08890fda..687feca9 100644 --- a/src/ts-tailwind/Components/InfiniteMenu/InfiniteMenu.tsx +++ b/src/ts-tailwind/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'; const discVertShaderSource = `#version 300 es diff --git a/src/ts-tailwind/Components/LineSidebar/LineSidebar.tsx b/src/ts-tailwind/Components/LineSidebar/LineSidebar.tsx index d7409c85..8efe9b38 100644 --- a/src/ts-tailwind/Components/LineSidebar/LineSidebar.tsx +++ b/src/ts-tailwind/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'; type Falloff = 'linear' | 'smooth' | 'sharp'; diff --git a/src/ts-tailwind/Components/ModelViewer/ModelViewer.tsx b/src/ts-tailwind/Components/ModelViewer/ModelViewer.tsx index 9488cd2e..7fb498f6 100644 --- a/src/ts-tailwind/Components/ModelViewer/ModelViewer.tsx +++ b/src/ts-tailwind/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'; diff --git a/src/ts-tailwind/Components/OptionWheel/OptionWheel.tsx b/src/ts-tailwind/Components/OptionWheel/OptionWheel.tsx index 56b346ab..5f0e4b76 100644 --- a/src/ts-tailwind/Components/OptionWheel/OptionWheel.tsx +++ b/src/ts-tailwind/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'; type Side = 'left' | 'right'; diff --git a/src/ts-tailwind/Components/PixelCard/PixelCard.tsx b/src/ts-tailwind/Components/PixelCard/PixelCard.tsx index fa6402a1..6add9eb3 100644 --- a/src/ts-tailwind/Components/PixelCard/PixelCard.tsx +++ b/src/ts-tailwind/Components/PixelCard/PixelCard.tsx @@ -1,5 +1,5 @@ import { useEffect, useRef } from 'react'; -import { JSX } from 'react'; +import { type JSX } from 'react'; class Pixel { width: number; diff --git a/src/ts-tailwind/Components/SpecularButton/SpecularButton.tsx b/src/ts-tailwind/Components/SpecularButton/SpecularButton.tsx index 62223105..0d54c82f 100644 --- a/src/ts-tailwind/Components/SpecularButton/SpecularButton.tsx +++ b/src/ts-tailwind/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'; type ButtonSize = 'sm' | 'md' | 'lg'; diff --git a/src/ts-tailwind/Components/Stepper/Stepper.tsx b/src/ts-tailwind/Components/Stepper/Stepper.tsx index 5963c460..8ea9be44 100644 --- a/src/ts-tailwind/Components/Stepper/Stepper.tsx +++ b/src/ts-tailwind/Components/Stepper/Stepper.tsx @@ -1,5 +1,5 @@ -import React, { useState, Children, useRef, useLayoutEffect, HTMLAttributes, ReactNode } from 'react'; -import { motion, AnimatePresence, Variants } from 'motion/react'; +import React, { useState, Children, useRef, useLayoutEffect, type HTMLAttributes, type ReactNode } from 'react'; +import { motion, AnimatePresence, type Variants } from 'motion/react'; interface StepperProps extends HTMLAttributes { children: ReactNode; diff --git a/src/ts-tailwind/TextAnimations/BlurText/BlurText.tsx b/src/ts-tailwind/TextAnimations/BlurText/BlurText.tsx index 330d7e06..1f1dd4cc 100644 --- a/src/ts-tailwind/TextAnimations/BlurText/BlurText.tsx +++ b/src/ts-tailwind/TextAnimations/BlurText/BlurText.tsx @@ -1,4 +1,4 @@ -import { motion, Transition, Easing } from 'motion/react'; +import { motion, type Transition, type Easing } from 'motion/react'; import { useEffect, useRef, useState, useMemo } from 'react'; type BlurTextProps = { diff --git a/src/ts-tailwind/TextAnimations/CircularText/CircularText.tsx b/src/ts-tailwind/TextAnimations/CircularText/CircularText.tsx index 57d705a4..15c99906 100644 --- a/src/ts-tailwind/TextAnimations/CircularText/CircularText.tsx +++ b/src/ts-tailwind/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'; interface CircularTextProps { text: string; spinDuration?: number; diff --git a/src/ts-tailwind/TextAnimations/CurvedLoop/CurvedLoop.tsx b/src/ts-tailwind/TextAnimations/CurvedLoop/CurvedLoop.tsx index df7c57e6..249f9497 100644 --- a/src/ts-tailwind/TextAnimations/CurvedLoop/CurvedLoop.tsx +++ b/src/ts-tailwind/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'; interface CurvedLoopProps { marqueeText?: string; diff --git a/src/ts-tailwind/TextAnimations/GlitchText/GlitchText.tsx b/src/ts-tailwind/TextAnimations/GlitchText/GlitchText.tsx index 0455e981..fbb8aa63 100644 --- a/src/ts-tailwind/TextAnimations/GlitchText/GlitchText.tsx +++ b/src/ts-tailwind/TextAnimations/GlitchText/GlitchText.tsx @@ -1,4 +1,4 @@ -import { FC, CSSProperties } from 'react'; +import { type FC, type CSSProperties } from 'react'; interface GlitchTextProps { children: string; diff --git a/src/ts-tailwind/TextAnimations/GradientText/GradientText.tsx b/src/ts-tailwind/TextAnimations/GradientText/GradientText.tsx index 5ab05bbb..618b54ef 100644 --- a/src/ts-tailwind/TextAnimations/GradientText/GradientText.tsx +++ b/src/ts-tailwind/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'; interface GradientTextProps { diff --git a/src/ts-tailwind/TextAnimations/RotatingText/RotatingText.tsx b/src/ts-tailwind/TextAnimations/RotatingText/RotatingText.tsx index 67a75296..8c5d794a 100644 --- a/src/ts-tailwind/TextAnimations/RotatingText/RotatingText.tsx +++ b/src/ts-tailwind/TextAnimations/RotatingText/RotatingText.tsx @@ -2,7 +2,7 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo import { motion, AnimatePresence, - Transition, + type Transition, type VariantLabels, type Target, type TargetAndTransition diff --git a/src/ts-tailwind/TextAnimations/ScrollFloat/ScrollFloat.tsx b/src/ts-tailwind/TextAnimations/ScrollFloat/ScrollFloat.tsx index f940be94..789668f0 100644 --- a/src/ts-tailwind/TextAnimations/ScrollFloat/ScrollFloat.tsx +++ b/src/ts-tailwind/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'; diff --git a/src/ts-tailwind/TextAnimations/ScrollReveal/ScrollReveal.tsx b/src/ts-tailwind/TextAnimations/ScrollReveal/ScrollReveal.tsx index d36df1ce..17a815c4 100644 --- a/src/ts-tailwind/TextAnimations/ScrollReveal/ScrollReveal.tsx +++ b/src/ts-tailwind/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'; diff --git a/src/ts-tailwind/TextAnimations/Shuffle/Shuffle.tsx b/src/ts-tailwind/TextAnimations/Shuffle/Shuffle.tsx index ece18277..77481b55 100644 --- a/src/ts-tailwind/TextAnimations/Shuffle/Shuffle.tsx +++ b/src/ts-tailwind/TextAnimations/Shuffle/Shuffle.tsx @@ -3,7 +3,7 @@ import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { SplitText as GSAPSplitText } from 'gsap/SplitText'; import { useGSAP } from '@gsap/react'; -import { JSX } from 'react'; +import { type JSX } from 'react'; gsap.registerPlugin(ScrollTrigger, GSAPSplitText); diff --git a/src/ts-tailwind/TextAnimations/TextType/TextType.tsx b/src/ts-tailwind/TextAnimations/TextType/TextType.tsx index 8e26364e..67db53f9 100644 --- a/src/ts-tailwind/TextAnimations/TextType/TextType.tsx +++ b/src/ts-tailwind/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'; interface TextTypeProps { diff --git a/src/ts-tailwind/TextAnimations/VariableProximity/VariableProximity.tsx b/src/ts-tailwind/TextAnimations/VariableProximity/VariableProximity.tsx index 51510bbe..5fb62e08 100644 --- a/src/ts-tailwind/TextAnimations/VariableProximity/VariableProximity.tsx +++ b/src/ts-tailwind/TextAnimations/VariableProximity/VariableProximity.tsx @@ -1,4 +1,12 @@ -import { forwardRef, useMemo, useRef, useEffect, MutableRefObject, CSSProperties, HTMLAttributes } from 'react'; +import { + forwardRef, + useMemo, + useRef, + useEffect, + type MutableRefObject, + type CSSProperties, + type HTMLAttributes +} from 'react'; import { motion } from 'motion/react'; function useAnimationFrame(callback: () => void) {