{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "particle-background",
  "type": "registry:block",
  "title": "Particle background",
  "description": "Particle background",
  "files": [
    {
      "path": "components/usages/particlebackgroundusage.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport { motion } from \"framer-motion\";\nimport { ArrowRight } from \"lucide-react\";\nimport ParticleBackground from \"@/registry/open-source/particle-background\";\nimport { Button } from \"../ui/button\";\n\nconst Usage = () => {\n    return (\n        <section className=\"p-6 rounded-2xl relative overflow-hidden min-h-[90vh] flex items-center\">\n            <ParticleBackground />\n            <div className=\"absolute inset-0 bg-gradient-radial from-gray-800/50 to-transparent opacity-30\"></div>\n            <div className=\"container mx-auto px-4 md:px-6 relative z-10\">\n                <div className=\"grid gap-12 lg:grid-cols-2 items-center\">\n                    <motion.div\n                        className=\"space-y-6\"\n                        initial={{ opacity: 0, y: 50 }}\n                        animate={{ opacity: 1, y: 0 }}\n                        transition={{ duration: 0.8, delay: 0.3 }}\n                    >\n                        <motion.h1\n                            className=\"text-5xl font-bold tracking-tight sm:text-6xl md:text-7xl\"\n                            initial={{ opacity: 0, y: 20 }}\n                            animate={{ opacity: 1, y: 0 }}\n                            transition={{ duration: 0.5, delay: 0.5 }}\n                        >\n                            <motion.span\n                                className=\"text-amber-500 inline-block\"\n                                initial={{ opacity: 0, scale: 0.8 }}\n                                animate={{ opacity: 1, scale: 1 }}\n                                transition={{ duration: 0.5, delay: 0.7 }}\n                            >\n                                Chiloane\n                            </motion.span>{\" \"}\n                            Holdings\n                        </motion.h1>\n                        <motion.p\n                            className=\"text-xl md:text-2xl text-gray-300\"\n                            initial={{ opacity: 0 }}\n                            animate={{ opacity: 1 }}\n                            transition={{ duration: 0.5, delay: 0.9 }}\n                        >\n                            Empowering the Digital, Financial & Creative Economy of Africa\n                        </motion.p>\n                        <motion.div\n                            className=\"flex flex-col sm:flex-row gap-4 pt-4\"\n                            initial={{ opacity: 0, y: 20 }}\n                            animate={{ opacity: 1, y: 0 }}\n                            transition={{ duration: 0.5, delay: 1.1 }}\n                        >\n                            <motion.div\n                                whileHover={{ scale: 1.05 }}\n                                whileTap={{ scale: 0.95 }}\n                            >\n                                <Button className=\"bg-amber-500 hover:bg-amber-600 text-black relative overflow-hidden group\">\n                                    <span className=\"relative z-10\">Explore Our Divisions</span>\n                                    <span className=\"absolute inset-0 bg-linear-to-r from-amber-600 to-amber-400 opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:scale-110\"></span>\n                                </Button>\n                            </motion.div>\n                            <motion.div\n                                whileHover={{ scale: 1.05 }}\n                                whileTap={{ scale: 0.95 }}\n                            >\n                                <Button\n                                    variant=\"outline\"\n                                    className=\"border-amber-500 text-amber-500 hover:bg-amber-500/10 group\"\n                                >\n                                    <span>Contact Us</span>\n                                    <motion.div\n                                        initial={{ x: 0 }}\n                                        whileHover={{ x: 5 }}\n                                        transition={{ type: \"spring\", stiffness: 400, damping: 10 }}\n                                    >\n                                        <ArrowRight className=\"ml-2 h-4 w-4 group-hover:text-amber-400\" />\n                                    </motion.div>\n                                </Button>\n                            </motion.div>\n                        </motion.div>\n                    </motion.div>\n                    <motion.div\n                        className=\"flex justify-center\"\n                        initial={{ opacity: 0, scale: 0.8 }}\n                        animate={{ opacity: 1, scale: 1 }}\n                        transition={{ duration: 0.8, delay: 0.5, type: \"spring\" }}\n                    >\n                        <div className=\"relative h-[350px] w-[350px] md:h-[450px] md:w-[450px]\">\n                            <div className=\"absolute inset-0 rounded-full bg-linear-to-br from-amber-500/20 to-amber-700/10 backdrop-blur-xs flex items-center justify-center animate-pulse-slow\"></div>\n                            <motion.div\n                                className=\"absolute inset-4 rounded-full bg-linear-to-br from-amber-500/10 to-amber-700/5 backdrop-blur-md\"\n                                animate={{\n                                    boxShadow: [\n                                        \"0 0 20px 0px rgba(245, 158, 11, 0.3)\",\n                                        \"0 0 60px 10px rgba(245, 158, 11, 0.2)\",\n                                        \"0 0 20px 0px rgba(245, 158, 11, 0.3)\",\n                                    ],\n                                }}\n                                transition={{\n                                    duration: 4,\n                                    repeat: Number.POSITIVE_INFINITY,\n                                    repeatType: \"reverse\",\n                                }}\n                            ></motion.div>\n                            <motion.div\n                                className=\"absolute inset-0 flex items-center justify-center\"\n                                initial={{ opacity: 0, scale: 0.5 }}\n                                animate={{ opacity: 1, scale: 1 }}\n                                transition={{ duration: 0.5, delay: 0.8 }}\n                            >\n                                <div className=\"relative w-48 h-48\">\n                                    {/* Abstract Logo */}\n                                    <svg viewBox=\"0 0 200 200\" className=\"w-full h-full\">\n                                        <motion.path\n                                            d=\"M100,20 L160,50 L160,150 L100,180 L40,150 L40,50 Z\"\n                                            fill=\"none\"\n                                            stroke=\"rgba(245, 158, 11, 0.8)\"\n                                            strokeWidth=\"2\"\n                                            initial={{ pathLength: 0, opacity: 0 }}\n                                            animate={{ pathLength: 1, opacity: 1 }}\n                                            transition={{ duration: 2, delay: 1 }}\n                                        />\n                                        <motion.path\n                                            d=\"M100,40 L140,60 L140,140 L100,160 L60,140 L60,60 Z\"\n                                            fill=\"none\"\n                                            stroke=\"rgba(245, 158, 11, 0.6)\"\n                                            strokeWidth=\"2\"\n                                            initial={{ pathLength: 0, opacity: 0 }}\n                                            animate={{ pathLength: 1, opacity: 1 }}\n                                            transition={{ duration: 2, delay: 1.3 }}\n                                        />\n                                        <motion.path\n                                            d=\"M100,60 L120,70 L120,130 L100,140 L80,130 L80,70 Z\"\n                                            fill=\"rgba(245, 158, 11, 0.3)\"\n                                            initial={{ scale: 0, opacity: 0 }}\n                                            animate={{ scale: 1, opacity: 1 }}\n                                            transition={{ duration: 1, delay: 1.6 }}\n                                        />\n                                        <motion.circle\n                                            cx=\"100\"\n                                            cy=\"100\"\n                                            r=\"10\"\n                                            fill=\"rgba(245, 158, 11, 1)\"\n                                            initial={{ scale: 0 }}\n                                            animate={{ scale: 1 }}\n                                            transition={{ duration: 0.5, delay: 2 }}\n                                        />\n                                        <motion.path\n                                            d=\"M40,50 L100,100 L160,50\"\n                                            fill=\"none\"\n                                            stroke=\"rgba(245, 158, 11, 0.4)\"\n                                            strokeWidth=\"1\"\n                                            initial={{ pathLength: 0, opacity: 0 }}\n                                            animate={{ pathLength: 1, opacity: 1 }}\n                                            transition={{ duration: 1.5, delay: 2.2 }}\n                                        />\n                                        <motion.path\n                                            d=\"M40,150 L100,100 L160,150\"\n                                            fill=\"none\"\n                                            stroke=\"rgba(245, 158, 11, 0.4)\"\n                                            strokeWidth=\"1\"\n                                            initial={{ pathLength: 0, opacity: 0 }}\n                                            animate={{ pathLength: 1, opacity: 1 }}\n                                            transition={{ duration: 1.5, delay: 2.4 }}\n                                        />\n                                    </svg>\n                                </div>\n                            </motion.div>\n                        </div>\n                    </motion.div>\n                </div>\n            </div>\n            <div className=\"absolute bottom-0 left-0 right-0 h-20 bg-linear-to-t from-[#121212] to-transparent\"></div>\n        </section>\n    );\n};\n\nexport default Usage;\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/particlebackgroundusage.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport { motion } from \"framer-motion\";\nimport { ArrowRight } from \"lucide-react\";\nimport ParticleBackground from \"@/registry/open-source/particle-background\";\nimport { Button } from \"../ui/button\";\n\nconst Usage = () => {\n    return (\n        <section className=\"p-6 rounded-2xl relative overflow-hidden min-h-[90vh] flex items-center\">\n            <ParticleBackground />\n            <div className=\"absolute inset-0 bg-gradient-radial from-gray-800/50 to-transparent opacity-30\"></div>\n            <div className=\"container mx-auto px-4 md:px-6 relative z-10\">\n                <div className=\"grid gap-12 lg:grid-cols-2 items-center\">\n                    <motion.div\n                        className=\"space-y-6\"\n                        initial={{ opacity: 0, y: 50 }}\n                        animate={{ opacity: 1, y: 0 }}\n                        transition={{ duration: 0.8, delay: 0.3 }}\n                    >\n                        <motion.h1\n                            className=\"text-5xl font-bold tracking-tight sm:text-6xl md:text-7xl\"\n                            initial={{ opacity: 0, y: 20 }}\n                            animate={{ opacity: 1, y: 0 }}\n                            transition={{ duration: 0.5, delay: 0.5 }}\n                        >\n                            <motion.span\n                                className=\"text-amber-500 inline-block\"\n                                initial={{ opacity: 0, scale: 0.8 }}\n                                animate={{ opacity: 1, scale: 1 }}\n                                transition={{ duration: 0.5, delay: 0.7 }}\n                            >\n                                Chiloane\n                            </motion.span>{\" \"}\n                            Holdings\n                        </motion.h1>\n                        <motion.p\n                            className=\"text-xl md:text-2xl text-gray-300\"\n                            initial={{ opacity: 0 }}\n                            animate={{ opacity: 1 }}\n                            transition={{ duration: 0.5, delay: 0.9 }}\n                        >\n                            Empowering the Digital, Financial & Creative Economy of Africa\n                        </motion.p>\n                        <motion.div\n                            className=\"flex flex-col sm:flex-row gap-4 pt-4\"\n                            initial={{ opacity: 0, y: 20 }}\n                            animate={{ opacity: 1, y: 0 }}\n                            transition={{ duration: 0.5, delay: 1.1 }}\n                        >\n                            <motion.div\n                                whileHover={{ scale: 1.05 }}\n                                whileTap={{ scale: 0.95 }}\n                            >\n                                <Button className=\"bg-amber-500 hover:bg-amber-600 text-black relative overflow-hidden group\">\n                                    <span className=\"relative z-10\">Explore Our Divisions</span>\n                                    <span className=\"absolute inset-0 bg-linear-to-r from-amber-600 to-amber-400 opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:scale-110\"></span>\n                                </Button>\n                            </motion.div>\n                            <motion.div\n                                whileHover={{ scale: 1.05 }}\n                                whileTap={{ scale: 0.95 }}\n                            >\n                                <Button\n                                    variant=\"outline\"\n                                    className=\"border-amber-500 text-amber-500 hover:bg-amber-500/10 group\"\n                                >\n                                    <span>Contact Us</span>\n                                    <motion.div\n                                        initial={{ x: 0 }}\n                                        whileHover={{ x: 5 }}\n                                        transition={{ type: \"spring\", stiffness: 400, damping: 10 }}\n                                    >\n                                        <ArrowRight className=\"ml-2 h-4 w-4 group-hover:text-amber-400\" />\n                                    </motion.div>\n                                </Button>\n                            </motion.div>\n                        </motion.div>\n                    </motion.div>\n                    <motion.div\n                        className=\"flex justify-center\"\n                        initial={{ opacity: 0, scale: 0.8 }}\n                        animate={{ opacity: 1, scale: 1 }}\n                        transition={{ duration: 0.8, delay: 0.5, type: \"spring\" }}\n                    >\n                        <div className=\"relative h-[350px] w-[350px] md:h-[450px] md:w-[450px]\">\n                            <div className=\"absolute inset-0 rounded-full bg-linear-to-br from-amber-500/20 to-amber-700/10 backdrop-blur-xs flex items-center justify-center animate-pulse-slow\"></div>\n                            <motion.div\n                                className=\"absolute inset-4 rounded-full bg-linear-to-br from-amber-500/10 to-amber-700/5 backdrop-blur-md\"\n                                animate={{\n                                    boxShadow: [\n                                        \"0 0 20px 0px rgba(245, 158, 11, 0.3)\",\n                                        \"0 0 60px 10px rgba(245, 158, 11, 0.2)\",\n                                        \"0 0 20px 0px rgba(245, 158, 11, 0.3)\",\n                                    ],\n                                }}\n                                transition={{\n                                    duration: 4,\n                                    repeat: Number.POSITIVE_INFINITY,\n                                    repeatType: \"reverse\",\n                                }}\n                            ></motion.div>\n                            <motion.div\n                                className=\"absolute inset-0 flex items-center justify-center\"\n                                initial={{ opacity: 0, scale: 0.5 }}\n                                animate={{ opacity: 1, scale: 1 }}\n                                transition={{ duration: 0.5, delay: 0.8 }}\n                            >\n                                <div className=\"relative w-48 h-48\">\n                                    {/* Abstract Logo */}\n                                    <svg viewBox=\"0 0 200 200\" className=\"w-full h-full\">\n                                        <motion.path\n                                            d=\"M100,20 L160,50 L160,150 L100,180 L40,150 L40,50 Z\"\n                                            fill=\"none\"\n                                            stroke=\"rgba(245, 158, 11, 0.8)\"\n                                            strokeWidth=\"2\"\n                                            initial={{ pathLength: 0, opacity: 0 }}\n                                            animate={{ pathLength: 1, opacity: 1 }}\n                                            transition={{ duration: 2, delay: 1 }}\n                                        />\n                                        <motion.path\n                                            d=\"M100,40 L140,60 L140,140 L100,160 L60,140 L60,60 Z\"\n                                            fill=\"none\"\n                                            stroke=\"rgba(245, 158, 11, 0.6)\"\n                                            strokeWidth=\"2\"\n                                            initial={{ pathLength: 0, opacity: 0 }}\n                                            animate={{ pathLength: 1, opacity: 1 }}\n                                            transition={{ duration: 2, delay: 1.3 }}\n                                        />\n                                        <motion.path\n                                            d=\"M100,60 L120,70 L120,130 L100,140 L80,130 L80,70 Z\"\n                                            fill=\"rgba(245, 158, 11, 0.3)\"\n                                            initial={{ scale: 0, opacity: 0 }}\n                                            animate={{ scale: 1, opacity: 1 }}\n                                            transition={{ duration: 1, delay: 1.6 }}\n                                        />\n                                        <motion.circle\n                                            cx=\"100\"\n                                            cy=\"100\"\n                                            r=\"10\"\n                                            fill=\"rgba(245, 158, 11, 1)\"\n                                            initial={{ scale: 0 }}\n                                            animate={{ scale: 1 }}\n                                            transition={{ duration: 0.5, delay: 2 }}\n                                        />\n                                        <motion.path\n                                            d=\"M40,50 L100,100 L160,50\"\n                                            fill=\"none\"\n                                            stroke=\"rgba(245, 158, 11, 0.4)\"\n                                            strokeWidth=\"1\"\n                                            initial={{ pathLength: 0, opacity: 0 }}\n                                            animate={{ pathLength: 1, opacity: 1 }}\n                                            transition={{ duration: 1.5, delay: 2.2 }}\n                                        />\n                                        <motion.path\n                                            d=\"M40,150 L100,100 L160,150\"\n                                            fill=\"none\"\n                                            stroke=\"rgba(245, 158, 11, 0.4)\"\n                                            strokeWidth=\"1\"\n                                            initial={{ pathLength: 0, opacity: 0 }}\n                                            animate={{ pathLength: 1, opacity: 1 }}\n                                            transition={{ duration: 1.5, delay: 2.4 }}\n                                        />\n                                    </svg>\n                                </div>\n                            </motion.div>\n                        </div>\n                    </motion.div>\n                </div>\n            </div>\n            <div className=\"absolute bottom-0 left-0 right-0 h-20 bg-linear-to-t from-[#121212] to-transparent\"></div>\n        </section>\n    );\n};\n\nexport default Usage;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/particle-background.tsx",
      "content": "\"use client\";\r\n\r\nimport { useEffect, useRef } from \"react\";\r\nimport { motion } from \"framer-motion\";\r\n\r\nconst ParticleBackground = () => {\r\n    const canvasRef = useRef<HTMLCanvasElement>(null);\r\n\r\n    useEffect(() => {\r\n        const canvas = canvasRef.current;\r\n        if (!canvas) return;\r\n\r\n        const ctx = canvas.getContext(\"2d\");\r\n        if (!ctx) return;\r\n\r\n        // Set canvas dimensions\r\n        const setCanvasDimensions = () => {\r\n            canvas.width = window.innerWidth;\r\n            canvas.height = window.innerHeight;\r\n        };\r\n\r\n        setCanvasDimensions();\r\n        window.addEventListener(\"resize\", setCanvasDimensions);\r\n\r\n        // Particle class\r\n        class Particle {\r\n            x: number;\r\n            y: number;\r\n            size: number;\r\n            speedX: number;\r\n            speedY: number;\r\n            color: string;\r\n\r\n            constructor() {\r\n                this.x = Math.random() * (canvas?.width ?? window.innerWidth);\r\n                this.y = Math.random() * (canvas?.height ?? window.innerHeight);\r\n                this.size = Math.random() * 3 + 0.5;\r\n                this.speedX = Math.random() * 0.5 - 0.25;\r\n                this.speedY = Math.random() * 0.5 - 0.25;\r\n                this.color = `rgba(245, 158, 11, ${Math.random() * 0.5})`;\r\n            }\r\n\r\n            update() {\r\n                this.x += this.speedX;\r\n                this.y += this.speedY;\r\n\r\n                if (canvas) {\r\n                    if (this.x > canvas.width) this.x = 0;\r\n                    else if (this.x < 0) this.x = canvas.width;\r\n\r\n                    if (this.y > canvas.height) this.y = 0;\r\n                    else if (this.y < 0) this.y = canvas.height;\r\n                }\r\n            }\r\n\r\n            draw() {\r\n                if (!ctx) return;\r\n                ctx.fillStyle = this.color;\r\n                ctx.beginPath();\r\n                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\r\n                ctx.fill();\r\n            }\r\n        }\r\n\r\n        // Create particles\r\n        const particleCount = Math.min(\r\n            100,\r\n            Math.floor((window.innerWidth * window.innerHeight) / 10000),\r\n        );\r\n        const particles: Particle[] = [];\r\n\r\n        for (let i = 0; i < particleCount; i++) {\r\n            particles.push(new Particle());\r\n        }\r\n\r\n        // Animation loop\r\n        const animate = () => {\r\n            if (!ctx) return;\r\n            ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n            // Draw connections\r\n            ctx.strokeStyle = \"rgba(245, 158, 11, 0.05)\";\r\n            ctx.lineWidth = 0.5;\r\n\r\n            for (let i = 0; i < particles.length; i++) {\r\n                for (let j = i; j < particles.length; j++) {\r\n                    const dx = particles[i].x - particles[j].x;\r\n                    const dy = particles[i].y - particles[j].y;\r\n                    const distance = Math.sqrt(dx * dx + dy * dy);\r\n\r\n                    if (distance < 100) {\r\n                        ctx.beginPath();\r\n                        ctx.moveTo(particles[i].x, particles[i].y);\r\n                        ctx.lineTo(particles[j].x, particles[j].y);\r\n                        ctx.stroke();\r\n                    }\r\n                }\r\n            }\r\n\r\n            // Update and draw particles\r\n            particles.forEach((particle) => {\r\n                particle.update();\r\n                particle.draw();\r\n            });\r\n\r\n            requestAnimationFrame(animate);\r\n        };\r\n\r\n        animate();\r\n\r\n        return () => {\r\n            window.removeEventListener(\"resize\", setCanvasDimensions);\r\n        };\r\n    }, []);\r\n\r\n    return (\r\n        <motion.canvas\r\n            ref={canvasRef}\r\n            className=\"absolute inset-0 z-0\"\r\n            initial={{ opacity: 0 }}\r\n            animate={{ opacity: 1 }}\r\n            transition={{ duration: 1 }}\r\n        />\r\n    );\r\n};\r\n\r\nexport default ParticleBackground;\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/button.tsx",
      "content": "import * as React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nconst buttonVariants = cva(\r\n\t\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm text-white hover:text-gray-400 font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\r\n\t{\r\n\t\tvariants: {\r\n\t\t\tvariant: {\r\n\t\t\t\tsimple:\r\n\t\t\t\t\t\"bg-secondary relative z-10 bg-transparent hover:border-secondary hover:bg-secondary/50  border border-transparent dark:text-white text-sm md:text-sm transition font-medium duration-200  rounded-md px-4 py-2  flex items-center justify-center\",\r\n\t\t\t\tdefault: \"bg-primary text-primary-foreground hover:bg-primary/90\",\r\n\t\t\t\tdestructive:\r\n\t\t\t\t\t\"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\r\n\t\t\t\toutline:\r\n\t\t\t\t\t\"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\r\n\t\t\t\tsecondary:\r\n\t\t\t\t\t\"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n\t\t\t\tghost: \"hover:bg-accent hover:text-black hover:stroke-black dark:text-white text-black\",\r\n\t\t\t\tlink: \"text-primary underline-offset-4 hover:underline\",\r\n\t\t\t},\r\n\t\t\tsize: {\r\n\t\t\t\tdefault: \"h-10 px-4 py-2\",\r\n\t\t\t\tsm: \"h-9 rounded-md px-3\",\r\n\t\t\t\tlg: \"h-11 rounded-md px-8\",\r\n\t\t\t\ticon: \"h-10 w-10\",\r\n\t\t\t},\r\n\t\t},\r\n\t\tdefaultVariants: {\r\n\t\t\tvariant: \"default\",\r\n\t\t\tsize: \"default\",\r\n\t\t},\r\n\t}\r\n);\r\n\r\nexport interface ButtonProps\r\n\textends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n\t\tVariantProps<typeof buttonVariants> {\r\n\tasChild?: boolean;\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n\t({ className, variant, size, asChild = false, ...props }, ref) => {\r\n\t\tconst Comp = asChild ? Slot : \"button\";\r\n\t\treturn (\r\n\t\t\t<Comp\r\n\t\t\t\tclassName={cn(buttonVariants({ variant, size, className }))}\r\n\t\t\t\tref={ref}\r\n\t\t\t\t{...props}\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n);\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button, buttonVariants };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}