@catalystsoftware/ui 1.0.5 → 1.0.6

package/data/bg-data.tsx

@@ -1,901 +0,0 @@
-export const backgroundData = [
-    {
-        name: "CanvasFractalGrid",
-        value: "canvas-fractal-grid",
-        importPath: "~/components/catalyst-ui",
-        multiImport: "CanvasFractalGrid, ConfigurableCanvasFractalGrid",
-        path: "/components/catalyst-ui/backgrounds/canvas-fractal-grid.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/backgrounds/canvas-fractal-grid.tsx",
-        basicusage: `
-<CanvasFractalGrid />
-
-<CanvasFractalGrid 
-  dotSize={4} // number
-  dotSpacing={20} // number
-  dotOpacity={0.3} // number (0-1)
-  gradientAnimationDuration={20} // number
-  waveIntensity={30} // number
-  waveRadius={200} // number
-  dotColor="rgba(100, 100, 255, 1)" // string
-  glowColor="rgba(100, 100, 255, 1)" // string
-  enableNoise={true} // boolean
-  noiseOpacity={0.03} // number (0-1)
-  enableMouseGlow={true} // boolean
-  initialPerformance="medium" // low | medium | high
-  enableGradient={false} // boolean
-  gradients={[
-    {
-      stops: [
-        { color: "#FFD6A5", position: 0 },
-        { color: "#FFADAD", position: 25 }
-      ],
-      centerX: 50,
-      centerY: 50
-    }
-  ]} // GradientType[]
-/>`,
-        usage: `
-<CanvasFractalGrid 
-  dotSize={4} // number
-  dotSpacing={20} // number
-  dotOpacity={0.3} // number (0-1)
-  gradientAnimationDuration={20} // number
-  waveIntensity={30} // number
-  waveRadius={200} // number
-  dotColor="rgba(100, 100, 255, 1)" // string
-  glowColor="rgba(100, 100, 255, 1)" // string
-  enableNoise={true} // boolean
-  noiseOpacity={0.03} // number (0-1)
-  enableMouseGlow={true} // boolean
-  initialPerformance="medium" // low | medium | high
-  enableGradient={false} // boolean
-  gradients={[
-    {
-      stops: [
-        { color: "#FFD6A5", position: 0 },
-        { color: "#FFADAD", position: 25 }
-      ],
-      centerX: 50,
-      centerY: 50
-    }
-  ]} // GradientType[]
-/>`,
-        premium: true,
-        category: "Backgrounds",
-        tags: ["ui", "components", "background", "canvas", "fractal", "dots", "grid", "gradient", "interactive", "animation"],
-        features: ["Responsive", "TypeScript", "Interactive", "Animated Gradients", "Wave Effects", "Mouse Glow", "Noise Overlay", "Performance Optimization", "Customizable Gradients"],
-        dependencies: ["react", "motion/react", "lucide-react", "~/components/catalyst-ui"],
-        props: {
-            "CanvasFractalGrid": [
-                { name: "dotSize", type: "number", default: "4" },
-                { name: "dotSpacing", type: "number", default: "20" },
-                { name: "dotOpacity", type: "number", default: "0.3" },
-                { name: "gradientAnimationDuration", type: "number", default: "20" },
-                { name: "waveIntensity", type: "number", default: "30" },
-                { name: "waveRadius", type: "number", default: "200" },
-                { name: "dotColor", type: "string", default: "rgba(100, 100, 255, 1)" },
-                { name: "glowColor", type: "string", default: "rgba(100, 100, 255, 1)" },
-                { name: "enableNoise", type: "boolean", default: "true" },
-                { name: "noiseOpacity", type: "number", default: "0.03" },
-                { name: "enableMouseGlow", type: "boolean", default: "true" },
-                { name: "initialPerformance", type: "low | medium | high", default: "medium" },
-                { name: "enableGradient", type: "boolean", default: "false" },
-                { name: "gradients", type: "GradientType[]", default: "defaultGradients" },
-            ],
-        },
-        desc: null,
-        status: "Listed",
-        lastUpdated: "2024-12-02 14:30:00"
-    },
-    {
-        name: "FractalDotGrid",
-        value: "fractal-dot-grid",
-        importPath: "~/components/catalyst-ui",
-        multiImport: "FractalDotGrid, ConfigurableFractalDotGridDemo",
-        path: "/components/catalyst-ui/background/fractal-dot-grid.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/background/fractal-dot-grid.tsx",
-        basicusage: `
-<FractalDotGrid />
-
-<FractalDotGrid 
-  dotSize={4} // number
-  dotSpacing={20} // number
-  dotOpacity={0.3} // number (0-1)
-  waveIntensity={30} // number
-  waveRadius={200} // number
-  dotColor="rgba(100, 100, 255, 1)" // string
-  glowColor="rgba(100, 100, 255, 1)" // string
-  enableNoise={true} // boolean
-  noiseOpacity={0.03} // number (0-1)
-  enableMouseGlow={true} // boolean
-  initialPerformance="medium" // low | medium | high
-/>`,
-        usage: `
-<FractalDotGrid 
-  dotSize={4} // number
-  dotSpacing={20} // number
-  dotOpacity={0.3} // number (0-1)
-  waveIntensity={30} // number
-  waveRadius={200} // number
-  dotColor="rgba(100, 100, 255, 1)" // string
-  glowColor="rgba(100, 100, 255, 1)" // string
-  enableNoise={true} // boolean
-  noiseOpacity={0.03} // number (0-1)
-  enableMouseGlow={true} // boolean
-  initialPerformance="medium" // low | medium | high
-/>`,
-        premium: true,
-        category: "Background",
-        tags: ["ui", "components", "background", "canvas", "fractal", "dots", "grid", "interactive", "animation", "performance"],
-        features: ["Responsive", "TypeScript", "Interactive", "Wave Effects", "Mouse Glow", "Noise Overlay", "Performance Optimization", "Touch Support", "Customizable"],
-        dependencies: ["react", "motion/react", "lucide-react", "~/components/catalyst-ui"],
-        props: {
-            "FractalDotGrid": [
-                { name: "dotSize", type: "number", default: "4" },
-                { name: "dotSpacing", type: "number", default: "20" },
-                { name: "dotOpacity", type: "number", default: "0.3" },
-                { name: "waveIntensity", type: "number", default: "30" },
-                { name: "waveRadius", type: "number", default: "200" },
-                { name: "dotColor", type: "string", default: "rgba(100, 100, 255, 1)" },
-                { name: "glowColor", type: "string", default: "rgba(100, 100, 255, 1)" },
-                { name: "enableNoise", type: "boolean", default: "true" },
-                { name: "noiseOpacity", type: "number", default: "0.03" },
-                { name: "enableMouseGlow", type: "boolean", default: "true" },
-                { name: "initialPerformance", type: "low | medium | high", default: "medium" },
-            ],
-        },
-        desc: null,
-        status: "Listed",
-        lastUpdated: "2024-12-02 14:30:00"
-    },
-    {
-        name: "dynamic-rain",
-        value: "dynamic-rain",
-        importPath: "~/components/catalyst-ui/background/dynamic-rain",
-        multiImport: null,
-        basicusage: `
-<DottedGlowBackground />
-
-<DottedGlowBackground
-  gap={12}
-  radius={2}
-  opacity={0.6}
-  color="rgba(0,0,0,0.7)"
-  glowColor="rgba(0,170,255,0.85)"
-  speedMin={0.4}
-  speedMax={1.3}
-  speedScale={1}
-  backgroundOpacity={0}
-  className="absolute inset-0"
-/>`,
-        path: "/components/catalyst-ui/background/dynamic-rain.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/background/dynamic-rain.tsx",
-        usage: null,
-        premium: true,
-        category: "Background",
-        tags: ["background", "canvas", "animation", "glow"],
-        features: ["Canvas-based", "Animated", "Theme-aware", "High Performance"],
-        dependencies: ["react"],
-        props: {
-            "DottedGlowBackground": [
-                { name: "className", type: "string", default: "null" },
-                { name: "gap", type: "number", default: "12" },
-                { name: "radius", type: "number", default: "2" },
-                { name: "color", type: "string", default: "rgba(0,0,0,0.7)" },
-                { name: "darkColor", type: "string", default: "null" },
-                { name: "glowColor", type: "string", default: "rgba(0,170,255,0.85)" },
-                { name: "darkGlowColor", type: "string", default: "null" },
-                { name: "colorLightVar", type: "string", default: "null" },
-                { name: "colorDarkVar", type: "string", default: "null" },
-                { name: "glowColorLightVar", type: "string", default: "null" },
-                { name: "glowColorDarkVar", type: "string", default: "null" },
-                { name: "opacity", type: "number", default: "0.6" },
-                { name: "backgroundOpacity", type: "number", default: "0" },
-                { name: "speedMin", type: "number", default: "0.4" },
-                { name: "speedMax", type: "number", default: "1.3" },
-                { name: "speedScale", type: "number", default: "1" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Dotted Glow Background",
-        value: "dotted-glow-background",
-        importPath: "~/components/catalyst-ui/background/dotted-glow-background",
-        multiImport: null,
-        basicusage: `
-<DottedGlowBackground />
-
-<DottedGlowBackground
-  gap={12}
-  radius={2}
-  opacity={0.6}
-  color="rgba(0,0,0,0.7)"
-  glowColor="rgba(0,170,255,0.85)"
-  speedMin={0.4}
-  speedMax={1.3}
-  speedScale={1}
-  backgroundOpacity={0}
-  className="absolute inset-0"
-/>`,
-        path: "/components/catalyst-ui/background/dotted-glow-background.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/background/dotted-glow-background.tsx",
-        usage: null,
-        premium: true,
-        category: "Background",
-        tags: ["background", "canvas", "animation", "glow"],
-        features: ["Canvas-based", "Animated", "Theme-aware", "High Performance"],
-        dependencies: ["react"],
-        props: {
-            "DottedGlowBackground": [
-                { name: "className", type: "string", default: "null" },
-                { name: "gap", type: "number", default: "12" },
-                { name: "radius", type: "number", default: "2" },
-                { name: "color", type: "string", default: "rgba(0,0,0,0.7)" },
-                { name: "darkColor", type: "string", default: "null" },
-                { name: "glowColor", type: "string", default: "rgba(0,170,255,0.85)" },
-                { name: "darkGlowColor", type: "string", default: "null" },
-                { name: "colorLightVar", type: "string", default: "null" },
-                { name: "colorDarkVar", type: "string", default: "null" },
-                { name: "glowColorLightVar", type: "string", default: "null" },
-                { name: "glowColorDarkVar", type: "string", default: "null" },
-                { name: "opacity", type: "number", default: "0.6" },
-                { name: "backgroundOpacity", type: "number", default: "0" },
-                { name: "speedMin", type: "number", default: "0.4" },
-                { name: "speedMax", type: "number", default: "1.3" },
-                { name: "speedScale", type: "number", default: "1" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Lamp",
-        value: "lamp",
-        importPath: "~/components/catalyst-ui/background/lamp",
-        multiImport: "LampContainer",
-        basicusage: `
-<LampContainer>
-  <motion.h1
-    initial={{ opacity: 0.5, y: 100 }}
-    whileInView={{ opacity: 1, y: 0 }}
-    transition={{ delay: 0.3, duration: 0.8, ease: "easeInOut" }}
-    className="mt-8 bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent"
-  >
-    Your Content
-  </motion.h1>
-</LampContainer>`,
-        path: "/components/catalyst-ui/background/lamp.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/background/lamp.tsx",
-        usage: null,
-        premium: true,
-        category: "Background",
-        tags: ["animation", "background", "visual"],
-        features: ["Animated", "Visual Effects", "TypeScript", "Full Screen"],
-        dependencies: ["framer-motion", "react"],
-        props: {
-            "LampContainer": [
-                { name: "children", type: "React.ReactNode", default: "required" },
-                { name: "className", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Particles",
-        value: "particles",
-        importPath: "~/components/catalyst-ui/background/particles",
-        multiImport: null,
-        basicusage: `
-<Particles />
-
-<Particles 
-	className=""
-	quantity={100}
-	staticity={50}
-	ease={50}
-	size={0.4}
-	refresh={false}
-	color="#ffffff"
-	vx={0}
-	vy={0}
-/>`,
-        path: "/components/catalyst-ui/background/particles.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/background/particles.tsx",
-        usage: null,
-        premium: true,
-        category: "Background",
-        tags: ["backgrounds", "particles", "animated", "canvas", "interactive", "mouse"],
-        features: ["Responsive", "TypeScript", "Accessible", "Canvas Rendering", "Mouse Interaction", "Magnetic Effect", "Customizable Colors", "Velocity Control"],
-        dependencies: ["react"],
-        props: {
-            "Particles": [
-                { name: "className", type: "string", default: "null" },
-                { name: "quantity", type: "number", default: "100" },
-                { name: "staticity", type: "number", default: "50" },
-                { name: "ease", type: "number", default: "50" },
-                { name: "size", type: "number", default: "0.4" },
-                { name: "refresh", type: "boolean", default: "false" },
-                { name: "color", type: "string", default: "#ffffff" },
-                { name: "vx", type: "number", default: "0" },
-                { name: "vy", type: "number", default: "0" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Vortex",
-        value: "vortex",
-        importPath: "~/components/catalyst-ui/background/vortex",
-        multiImport: null,
-        basicusage: `
-<Vortex>
-	<div>Your content here</div>
-</Vortex>
-
-<Vortex 
-	particleCount={700}
-	rangeY={100}
-	baseHue={220}
-	baseSpeed={0.0}
-	rangeSpeed={1.5}
-	baseRadius={1}
-	rangeRadius={2}
-	backgroundColor="#000000"
-	className=""
-	containerClassName=""
->
-	<div>Your content here</div>
-</Vortex>`,
-        path: "/components/catalyst-ui/background/vortex.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/background/vortex.tsx",
-        usage: null,
-        premium: true,
-        category: "Background",
-        tags: ["backgrounds", "vortex", "particles", "animated", "flow", "canvas"],
-        features: ["Responsive", "TypeScript", "Accessible", "Canvas Rendering", "Particle Flow", "Customizable Colors", "Glow Effects"],
-        dependencies: ["react", "simplex-noise", "framer-motion"],
-        props: {
-            "Vortex": [
-                { name: "children", type: "ReactNode", default: "null" },
-                { name: "className", type: "string", default: "null" },
-                { name: "containerClassName", type: "string", default: "null" },
-                { name: "particleCount", type: "number", default: "700" },
-                { name: "rangeY", type: "number", default: "100" },
-                { name: "baseHue", type: "number", default: "220" },
-                { name: "baseSpeed", type: "number", default: "0.0" },
-                { name: "rangeSpeed", type: "number", default: "1.5" },
-                { name: "baseRadius", type: "number", default: "1" },
-                { name: "rangeRadius", type: "number", default: "2" },
-                { name: "backgroundColor", type: "string", default: "#000000" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Sparkles Core",
-        value: "sparkles-core",
-        importPath: "~/components/catalyst-ui/background/sparkles",
-        multiImport: null,
-        basicusage: `
-<SparklesCore />
-
-<SparklesCore 
-	id=""
-	className=""
-	background="#0d47a1"
-	particleSize={3}
-	minSize={1}
-	maxSize={3}
-	speed={4}
-	particleColor="#ffffff"
-	particleDensity={120}
-/>`,
-        path: "/components/catalyst-ui/background/sparkles.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/background/sparkles.tsx",
-        usage: null,
-        premium: true,
-        category: "Background",
-        tags: ["backgrounds", "sparkles", "particles", "animated", "interactive", "effects"],
-        features: ["Responsive", "TypeScript", "Accessible", "Interactive", "Animated Particles", "Customizable Colors", "Click Effects"],
-        dependencies: ["react", "@tsparticles/react", "@tsparticles/engine", "@tsparticles/slim", "framer-motion"],
-        props: {
-            "SparklesCore": [
-                { name: "id", type: "string", default: "null" },
-                { name: "className", type: "string", default: "null" },
-                { name: "background", type: "string", default: "#0d47a1" },
-                { name: "particleSize", type: "number", default: "null" },
-                { name: "minSize", type: "number", default: "1" },
-                { name: "maxSize", type: "number", default: "3" },
-                { name: "speed", type: "number", default: "4" },
-                { name: "particleColor", type: "string", default: "#ffffff" },
-                { name: "particleDensity", type: "number", default: "120" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Smoke",
-        value: "smoke",
-        importPath: "~/components/catalyst-ui/background/smoke",
-        multiImport: null,
-        basicusage: `
-<Smoke />
-
-<Smoke 
-	density={50}
-	color="#ffffff"
-	opacity={0.5}
-	enableRotation={true}
-	rotation={[0, 0, 0.1]}
-	enableWind={false}
-	windStrength={[0.01, 0.01, 0.01]}
-	enableTurbulence={false}
-	turbulenceStrength={[0.01, 0.01, 0.01]}
-	useSimpleScene={true}
-	className=""
-/>`,
-        path: "/components/catalyst-ui/background/smoke.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/background/smoke.tsx",
-        usage: null,
-        premium: true,
-        category: "Background",
-        tags: ["backgrounds", "smoke", "3d", "animated", "particles", "effect"],
-        features: ["Responsive", "TypeScript", "Accessible", "3D Rendering", "Wind Effects", "Turbulence", "Customizable"],
-        dependencies: ["react", "react-smoke", "@react-three/fiber", "three"],
-        props: {
-            "Smoke": [
-                { name: "density", type: "number", default: "50" },
-                { name: "color", type: "string", default: "#ffffff" },
-                { name: "opacity", type: "number", default: "0.5" },
-                { name: "enableRotation", type: "boolean", default: "true" },
-                { name: "rotation", type: "[number, number, number]", default: "[0, 0, 0.1]" },
-                { name: "enableWind", type: "boolean", default: "false" },
-                { name: "windStrength", type: "[number, number, number]", default: "[0.01, 0.01, 0.01]" },
-                { name: "enableTurbulence", type: "boolean", default: "false" },
-                { name: "turbulenceStrength", type: "[number, number, number]", default: "[0.01, 0.01, 0.01]" },
-                { name: "useSimpleScene", type: "boolean", default: "true" },
-                { name: "className", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Retro Grid",
-        value: "retro-grid",
-        importPath: "~/components/catalyst-ui/background/retro-grid",
-        multiImport: null,
-        basicusage: `
-<RetroGrid />
-
-<RetroGrid 
-	angle={65}
-	cellSize={60}
-	opacity={0.5}
-	lightLineColor="gray"
-	darkLineColor="gray"
-	className=""
-/>`,
-        path: "/components/catalyst-ui/background/retro-grid.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/background/retro-grid.tsx",
-        usage: null,
-        premium: true,
-        category: "Background",
-        tags: ["backgrounds", "grid", "retro", "cyberpunk", "animated", "3d"],
-        features: ["Responsive", "TypeScript", "Accessible", "Animated", "3D Perspective", "Customizable Colors"],
-        dependencies: ["react"],
-        props: {
-            "RetroGrid": [
-                { name: "angle", type: "number", default: "65" },
-                { name: "cellSize", type: "number", default: "60" },
-                { name: "opacity", type: "number", default: "0.5" },
-                { name: "lightLineColor", type: "string", default: "gray" },
-                { name: "darkLineColor", type: "string", default: "gray" },
-                { name: "className", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Interactive Grid Pattern",
-        value: "interactive-grid-pattern",
-        importPath: "~/components/catalyst-ui/background/interactive-grid-pattern",
-        multiImport: null,
-        basicusage: `
-<InteractiveGridPattern />
-
-<InteractiveGridPattern 
-	width={40}
-	height={40}
-	squares={[24, 24]}
-	className=""
-	squaresClassName=""
-/>`,
-        path: "/components/catalyst-ui/background/interactive-grid-pattern.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/background/interactive-grid-pattern.tsx",
-        usage: null,
-        premium: true,
-        category: "Background",
-        tags: ["backgrounds", "grid", "pattern", "interactive", "hover"],
-        features: ["Responsive", "TypeScript", "Accessible", "Interactive", "Hover Effects", "Customizable Grid"],
-        dependencies: ["react"],
-        props: {
-            "InteractiveGridPattern": [
-                { name: "width", type: "number", default: "40" },
-                { name: "height", type: "number", default: "40" },
-                { name: "squares", type: "[number, number]", default: "[24, 24]" },
-                { name: "className", type: "string", default: "null" },
-                { name: "squaresClassName", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Hexagon Background",
-        value: "hexagon-background",
-        importPath: "~/components/catalyst-ui/background/hexagon-background",
-        multiImport: null,
-        basicusage: `
-<HexagonBackground>
-	<div>Your content here</div>
-</HexagonBackground>
-
-<HexagonBackground 
-	hexagonSize={75}
-	hexagonMargin={3}
-	className=""
-	hexagonProps={{ className: "" }}
->
-	<div>Your content here</div>
-</HexagonBackground>`,
-        path: "/components/catalyst-ui/background/hexagon-background.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/background/hexagon-background.tsx",
-        usage: null,
-        premium: true,
-        category: "Background",
-        tags: ["backgrounds", "hexagon", "pattern", "geometric", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible", "Hover Effects", "Customizable Size", "Dynamic Grid"],
-        dependencies: ["react"],
-        props: {
-            "HexagonBackground": [
-                { name: "hexagonSize", type: "number", default: "75" },
-                { name: "hexagonMargin", type: "number", default: "3" },
-                { name: "className", type: "string", default: "null" },
-                { name: "hexagonProps", type: "React.ComponentProps<'div'>", default: "null" },
-                { name: "children", type: "ReactNode", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: 'Background Gradient',
-        value: 'background-gradient',
-        importPath: '~/components/catalyst-ui/background/background-gradient',
-        multiImport: null,
-        basicusage: `
-<BackgroundGradient>
-  <div>Content</div>
-</BackgroundGradient>
-
-<BackgroundGradient 
-  animate={true}
-  className=""
-  containerClassName=""
->
-  <div>Content</div>
-</BackgroundGradient>`,
-        path: '/components/catalyst-ui/background/background-gradient.tsx',
-        source: null,
-        usagePath: '/components/catalyst-ui/background/background-gradient.tsx',
-        usage: null,
-        premium: true,
-        category: 'Background',
-        tags: ['background', 'gradient', 'border', 'animation', 'decorative'],
-        features: ['Responsive', 'TypeScript', 'Accessible', 'Animated'],
-        dependencies: ['motion/react', 'react'],
-        props: {
-            BackgroundGradient: [
-                { name: 'children', type: 'React.ReactNode', default: 'null' },
-                { name: 'animate', type: 'boolean', default: 'true' },
-                { name: 'className', type: 'string', default: 'null' },
-                { name: 'containerClassName', type: 'string', default: 'null' },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: 'Orbiting Circles',
-        value: 'orbiting-circles',
-        importPath: '~/components/catalyst-ui/background/orbiting-circles',
-        multiImport: null,
-        basicusage: `
-<OrbitingCircles>
-  <Icon1 />
-  <Icon2 />
-</OrbitingCircles>
-
-<OrbitingCircles 
-  reverse={false}
-  duration={20}
-  delay={0}
-  radius={160}
-  path={true}
-  iconSize={30}
-  speed={1}
-  className=""
->
-  <Icon1 />
-  <Icon2 />
-</OrbitingCircles>`,
-        path: '/components/catalyst-ui/background/orbiting-circles.tsx',
-        source: null,
-        usagePath: '/components/catalyst-ui/background/orbiting-circles.tsx',
-        usage: null,
-        premium: true,
-        category: 'Background',
-        tags: ['orbiting', 'circles', 'animation', 'background', 'decorative'],
-        features: ['Responsive', 'TypeScript', 'Accessible', 'Animated'],
-        dependencies: ['react'],
-        props: {
-            OrbitingCircles: [
-                { name: 'children', type: 'React.ReactNode', default: 'null' },
-                { name: 'reverse', type: 'boolean', default: 'false' },
-                { name: 'duration', type: 'number', default: '20' },
-                { name: 'delay', type: 'number', default: '0' },
-                { name: 'radius', type: 'number', default: '160' },
-                { name: 'path', type: 'boolean', default: 'true' },
-                { name: 'iconSize', type: 'number', default: '30' },
-                { name: 'speed', type: 'number', default: '1' },
-                { name: 'className', type: 'string', default: 'null' },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Animated Beam",
-        value: "animated-beam",
-        importPath: "~/components/catalyst-ui/background/animated-beam",
-        multiImport: null,
-        basicusage: null,
-        path: "/components/catalyst-ui/background/animated-beam.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/background/animated-beam.tsx",
-        usage: null,
-        premium: true,
-        category: "Background",
-        tags: ["animation", "svg", "gradient", "connection", "interactive"],
-        features: ["Dynamic SVG Paths", "Gradient Animations", "Responsive", "Customizable Curvature"],
-        dependencies: ["motion/react", "react"],
-        props: {
-            "AnimatedBeam": [
-                { name: "className", type: "string", default: "null" },
-                { name: "containerRef", type: "RefObject<HTMLElement | null>", default: "null" },
-                { name: "fromRef", type: "RefObject<HTMLElement | null>", default: "null" },
-                { name: "toRef", type: "RefObject<HTMLElement | null>", default: "null" },
-                { name: "curvature", type: "number", default: "0" },
-                { name: "reverse", type: "boolean", default: "false" },
-                { name: "pathColor", type: "string", default: "gray" },
-                { name: "pathWidth", type: "number", default: "2" },
-                { name: "pathOpacity", type: "number", default: "0.2" },
-                { name: "gradientStartColor", type: "string", default: "#ffaa40" },
-                { name: "gradientStopColor", type: "string", default: "#9c40ff" },
-                { name: "delay", type: "number", default: "0" },
-                { name: "duration", type: "number", default: "Math.random() * 3 + 4" },
-                { name: "startXOffset", type: "number", default: "0" },
-                { name: "startYOffset", type: "number", default: "0" },
-                { name: "endXOffset", type: "number", default: "0" },
-                { name: "endYOffset", type: "number", default: "0" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Background Paths",
-        value: "background-paths",
-        importPath: "~/components/catalyst-ui/background/background-paths",
-        multiImport: null,
-        basicusage: `
-<BackgroundPaths>
-    <div>Content</div>
-</BackgroundPaths>
-
-<BackgroundPaths 
-    pathColor="currentColor"
-    pathWidth={2}
-    pathOpacity={0.1}
-    variant="curved"
-    animate={true}
-    className=""
->
-    <div>Content</div>
-</BackgroundPaths>`,
-        path: "/components/catalyst-ui/background/background-paths.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/background/background-paths.tsx",
-        usage: null,
-        premium: true,
-        category: "Background",
-        tags: ["ui", "components", "decorative", "background", "svg", "paths", "animated", "patterns"],
-        features: ["Responsive", "TypeScript", "Accessible", "Animated", "Multiple Variants", "SVG Paths"],
-        dependencies: ["react"],
-        props: {
-            "BackgroundPaths": [
-                { name: "pathColor", type: "string", default: "currentColor" },
-                { name: "pathWidth", type: "number", default: "2" },
-                { name: "pathOpacity", type: "number", default: "0.1" },
-                { name: "variant", type: "curved | zigzag | wavy | diagonal", default: "curved" },
-                { name: "animate", type: "boolean", default: "true" },
-                { name: "children", type: "React.ReactNode", default: "null" },
-                { name: "className", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Flickering Grid",
-        value: "flickering-grid",
-        importPath: "~/components/catalyst-ui/background/flickering-grid",
-        multiImport: null,
-        basicusage: `
-<FlickeringGrid />
-
-<FlickeringGrid 
-  squareSize={4}
-  gridGap={6}
-  flickerChance={0.3}
-  color="#6B7280"
-  width={800}
-  height={600}
-  maxOpacity={0.5}
-  className="absolute inset-0"
-/>`,
-        path: "/components/catalyst-ui/background/flickering-grid.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/background/flickering-grid.tsx",
-        usage: null,
-        premium: true,
-        category: "Background",
-        tags: ["animation", "canvas", "grid", "background"],
-        features: ["Canvas Animation", "Performance Optimized", "Responsive", "TypeScript"],
-        dependencies: ["react"],
-        props: {
-            "FlickeringGrid": [
-                { name: "className", type: "string", default: "null" },
-                { name: "squareSize", type: "number", default: "4" },
-                { name: "gridGap", type: "number", default: "6" },
-                { name: "flickerChance", type: "number", default: "0.3" },
-                { name: "color", type: "string", default: "rgb(0, 0, 0)" },
-                { name: "width", type: "number", default: "null" },
-                { name: "height", type: "number", default: "null" },
-                { name: "maxOpacity", type: "number", default: "0.3" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Dot Pattern",
-        value: "dot-pattern",
-        importPath: "~/components/catalyst-ui/background/dot-pattern",
-        multiImport: null,
-        basicusage: `
-<DotPattern />
-
-<DotPattern 
-  width={20}
-  height={20}
-  cx={2}
-  cy={2}
-  cr={1.5}
-  glow={true}
-  className="opacity-50"
-/>`,
-        path: "/components/catalyst-ui/background/dot-pattern.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/background/dot-pattern.tsx",
-        usage: null,
-        premium: true,
-        category: "Background",
-        tags: ["background", "pattern", "animation", "svg"],
-        features: ["Responsive", "Animated", "Customizable", "TypeScript"],
-        dependencies: ["motion", "react"],
-        props: {
-            "DotPattern": [
-                { name: "className", type: "string", default: "null" },
-                { name: "width", type: "number", default: "16" },
-                { name: "height", type: "number", default: "16" },
-                { name: "x", type: "number", default: "0" },
-                { name: "y", type: "number", default: "0" },
-                { name: "cx", type: "number", default: "1" },
-                { name: "cy", type: "number", default: "1" },
-                { name: "cr", type: "number", default: "1" },
-                { name: "glow", type: "boolean", default: "false" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Dotted Map",
-        value: "dotted-map",
-        importPath: "~/components/catalyst-ui/background/dotted-map",
-        multiImport: null,
-        basicusage: `
-<DottedMap />
-
-<DottedMap 
-  width={200}
-  height={100}
-  markers={markers}
-  markerColor="#FF6900"
-  dotRadius={0.3}
-  stagger={true}
-  className="w-full h-64"
-/>`,
-        path: "/components/catalyst-ui/background/dotted-map.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/background/dotted-map.tsx",
-        usage: null,
-        premium: true,
-        category: "Background",
-        tags: ["map", "locations", "markers", "geography"],
-        features: ["Custom Markers", "Responsive", "SVG Based", "TypeScript"],
-        dependencies: ["svg-dotted-map", "react"],
-        props: {
-            "DottedMap": [
-                { name: "className", type: "string", default: "null" },
-                { name: "width", type: "number", default: "150" },
-                { name: "height", type: "number", default: "75" },
-                { name: "mapSamples", type: "number", default: "5000" },
-                { name: "markers", type: "Marker[]", default: "[]" },
-                { name: "markerColor", type: "string", default: "#FF6900" },
-                { name: "dotRadius", type: "number", default: "0.2" },
-                { name: "stagger", type: "boolean", default: "true" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-];