fix: refactor component apis (#520)

__registry__/index.tsx

@@ -203,7 +203,7 @@ export const Index: Record<string, any> = {
     "script-copy-btn": {
       name: "script-copy-btn",
       type: "registry:ui",
-      registryDependencies: undefined,
+      registryDependencies: ["button"],
       files: ["registry/default/magicui/script-copy-btn.tsx"],
       component: React.lazy(
         () => import("@/registry/default/magicui/script-copy-btn.tsx"),
@@ -281,7 +281,7 @@ export const Index: Record<string, any> = {
     "bento-grid": {
       name: "bento-grid",
       type: "registry:ui",
-      registryDependencies: undefined,
+      registryDependencies: ["button"],
       files: ["registry/default/magicui/bento-grid.tsx"],
       component: React.lazy(
         () => import("@/registry/default/magicui/bento-grid.tsx"),
@@ -648,7 +648,7 @@ export const Index: Record<string, any> = {
     confetti: {
       name: "confetti",
       type: "registry:ui",
-      registryDependencies: undefined,
+      registryDependencies: ["button"],
       files: ["registry/default/magicui/confetti.tsx"],
       component: React.lazy(
         () => import("@/registry/default/magicui/confetti.tsx"),

app/(marketing)/showcase/page.tsx

@@ -1,9 +1,9 @@
 import { allShowcases } from "content-collections";
 
 import { ShowcaseCard } from "@/components/sections/showcase";
-import BlurFade from "@/registry/default/magicui/blur-fade";
+import { BlurFade } from "@/registry/default/magicui/blur-fade";
 
-export default async function Page() {
+export default function Page() {
   return (
     <article className="container max-w-[120ch] py-14">
       <h2 className="mb-2 text-center text-5xl font-bold leading-[1.2] tracking-tighter text-foreground">

components/mdx-components.tsx

@@ -11,7 +11,7 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Event } from "@/lib/events";
 import { cn } from "@/lib/utils";
-import TweetCard from "@/registry/default/magicui/tweet-card";
+import { TweetCard } from "@/registry/default/magicui/tweet-card";
 import { useMDXComponent } from "@content-collections/mdx/react";
 import Image from "next/image";
 import Link from "next/link";

components/sections/showcase.tsx

@@ -2,7 +2,7 @@ import { ChevronRightIcon } from "@radix-ui/react-icons";
 import { allShowcases } from "content-collections";
 import Link from "next/link";
 
-import Marquee from "@/registry/default/magicui/marquee";
+import { Marquee } from "@/registry/default/magicui/marquee";
 
 export interface ShowcaseCardProps {
   title: string;

components/sections/testimonials.tsx

@@ -1,5 +1,5 @@
-import Marquee from "@/registry/default/magicui/marquee";
-import TweetCard from "@/registry/default/magicui/tweet-card";
+import { Marquee } from "@/registry/default/magicui/marquee";
+import { TweetCard } from "@/registry/default/magicui/tweet-card";
 
 const tweets = [
   "https://x.com/chronark_/status/1754781648262967323",

components/sidebar-cta.tsx

@@ -4,7 +4,7 @@ import { ChevronRight } from "lucide-react";
 import Link from "next/link";
 import posthog from "posthog-js";
 
-import AnimatedShinyText from "@/registry/default/magicui/animated-shiny-text";
+import { AnimatedShinyText } from "@/registry/default/magicui/animated-shiny-text";
 import { TextAnimate } from "@/registry/default/magicui/text-animate";
 
 export default function SidebarCTA() {

components/site-header.tsx

@@ -9,7 +9,7 @@ import { ModeToggle } from "@/components/mode-toggle";
 import { buttonVariants } from "@/components/ui/button";
 import { siteConfig } from "@/config/site";
 import { cn } from "@/lib/utils";
-import NumberTicker from "@/registry/default/magicui/number-ticker";
+import { NumberTicker } from "@/registry/default/magicui/number-ticker";
 
 export async function SiteHeader() {
   let stars = 300; // Default value

public/r/index.json

@@ -167,9 +167,6 @@
   {
     "name": "morphing-text",
     "type": "registry:ui",
-    "dependencies": [
-      "motion"
-    ],
     "files": [
       {
         "path": "magicui/morphing-text.tsx",
@@ -290,9 +287,6 @@
   {
     "name": "flickering-grid",
     "type": "registry:ui",
-    "dependencies": [
-      "motion"
-    ],
     "files": [
       {
         "path": "magicui/flickering-grid.tsx",
@@ -335,6 +329,9 @@
       "shiki",
       "next-themes"
     ],
+    "registryDependencies": [
+      "button"
+    ],
     "files": [
       {
         "path": "magicui/script-copy-btn.tsx",
@@ -386,8 +383,7 @@
     "name": "globe",
     "type": "registry:ui",
     "dependencies": [
-      "cobe",
-      "react-spring"
+      "cobe"
     ],
     "files": [
       {
@@ -471,6 +467,9 @@
     "dependencies": [
       "@radix-ui/react-icons"
     ],
+    "registryDependencies": [
+      "button"
+    ],
     "files": [
       {
         "path": "magicui/bento-grid.tsx",
@@ -948,6 +947,9 @@
       "canvas-confetti",
       "@types/canvas-confetti"
     ],
+    "registryDependencies": [
+      "button"
+    ],
     "files": [
       {
         "path": "magicui/confetti.tsx",
@@ -1141,9 +1143,6 @@
   {
     "name": "interactive-hover-button",
     "type": "registry:ui",
-    "dependencies": [
-      "lucide-react"
-    ],
     "files": [
       {
         "path": "magicui/interactive-hover-button.tsx",

public/r/styles/default/animated-circular-progress-bar.json

@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "magicui/animated-circular-progress-bar.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\n\ninterface Props {\n  max: number;\n  value: number;\n  min: number;\n  gaugePrimaryColor: string;\n  gaugeSecondaryColor: string;\n  className?: string;\n}\n\nexport default function AnimatedCircularProgressBar({\n  max = 100,\n  min = 0,\n  value = 0,\n  gaugePrimaryColor,\n  gaugeSecondaryColor,\n  className,\n}: Props) {\n  const circumference = 2 * Math.PI * 45;\n  const percentPx = circumference / 100;\n  const currentPercent = Math.round(((value - min) / (max - min)) * 100);\n\n  return (\n    <div\n      className={cn(\"relative size-40 text-2xl font-semibold\", className)}\n      style={\n        {\n          \"--circle-size\": \"100px\",\n          \"--circumference\": circumference,\n          \"--percent-to-px\": `${percentPx}px`,\n          \"--gap-percent\": \"5\",\n          \"--offset-factor\": \"0\",\n          \"--transition-length\": \"1s\",\n          \"--transition-step\": \"200ms\",\n          \"--delay\": \"0s\",\n          \"--percent-to-deg\": \"3.6deg\",\n          transform: \"translateZ(0)\",\n        } as React.CSSProperties\n      }\n    >\n      <svg\n        fill=\"none\"\n        className=\"size-full\"\n        strokeWidth=\"2\"\n        viewBox=\"0 0 100 100\"\n      >\n        {currentPercent <= 90 && currentPercent >= 0 && (\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"45\"\n            strokeWidth=\"10\"\n            strokeDashoffset=\"0\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className=\" opacity-100\"\n            style={\n              {\n                stroke: gaugeSecondaryColor,\n                \"--stroke-percent\": 90 - currentPercent,\n                \"--offset-factor-secondary\": \"calc(1 - var(--offset-factor))\",\n                strokeDasharray:\n                  \"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)\",\n                transform:\n                  \"rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)\",\n                transition: \"all var(--transition-length) ease var(--delay)\",\n                transformOrigin:\n                  \"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)\",\n              } as React.CSSProperties\n            }\n          />\n        )}\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r=\"45\"\n          strokeWidth=\"10\"\n          strokeDashoffset=\"0\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"opacity-100\"\n          style={\n            {\n              stroke: gaugePrimaryColor,\n              \"--stroke-percent\": currentPercent,\n              strokeDasharray:\n                \"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)\",\n              transition:\n                \"var(--transition-length) ease var(--delay),stroke var(--transition-length) ease var(--delay)\",\n              transitionProperty: \"stroke-dasharray,transform\",\n              transform:\n                \"rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))\",\n              transformOrigin:\n                \"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)\",\n            } as React.CSSProperties\n          }\n        />\n      </svg>\n      <span\n        data-current-value={currentPercent}\n        className=\"duration-[var(--transition-length)] delay-[var(--delay)] absolute inset-0 m-auto size-fit ease-linear animate-in fade-in\"\n      >\n        {currentPercent}\n      </span>\n    </div>\n  );\n}\n",
+      "content": "import { cn } from \"@/lib/utils\";\n\ninterface AnimatedCircularProgressBarProps {\n  max: number;\n  value: number;\n  min: number;\n  gaugePrimaryColor: string;\n  gaugeSecondaryColor: string;\n  className?: string;\n}\n\nexport function AnimatedCircularProgressBar({\n  max = 100,\n  min = 0,\n  value = 0,\n  gaugePrimaryColor,\n  gaugeSecondaryColor,\n  className,\n}: AnimatedCircularProgressBarProps) {\n  const circumference = 2 * Math.PI * 45;\n  const percentPx = circumference / 100;\n  const currentPercent = Math.round(((value - min) / (max - min)) * 100);\n\n  return (\n    <div\n      className={cn(\"relative size-40 text-2xl font-semibold\", className)}\n      style={\n        {\n          \"--circle-size\": \"100px\",\n          \"--circumference\": circumference,\n          \"--percent-to-px\": `${percentPx}px`,\n          \"--gap-percent\": \"5\",\n          \"--offset-factor\": \"0\",\n          \"--transition-length\": \"1s\",\n          \"--transition-step\": \"200ms\",\n          \"--delay\": \"0s\",\n          \"--percent-to-deg\": \"3.6deg\",\n          transform: \"translateZ(0)\",\n        } as React.CSSProperties\n      }\n    >\n      <svg\n        fill=\"none\"\n        className=\"size-full\"\n        strokeWidth=\"2\"\n        viewBox=\"0 0 100 100\"\n      >\n        {currentPercent <= 90 && currentPercent >= 0 && (\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"45\"\n            strokeWidth=\"10\"\n            strokeDashoffset=\"0\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className=\" opacity-100\"\n            style={\n              {\n                stroke: gaugeSecondaryColor,\n                \"--stroke-percent\": 90 - currentPercent,\n                \"--offset-factor-secondary\": \"calc(1 - var(--offset-factor))\",\n                strokeDasharray:\n                  \"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)\",\n                transform:\n                  \"rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)\",\n                transition: \"all var(--transition-length) ease var(--delay)\",\n                transformOrigin:\n                  \"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)\",\n              } as React.CSSProperties\n            }\n          />\n        )}\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r=\"45\"\n          strokeWidth=\"10\"\n          strokeDashoffset=\"0\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"opacity-100\"\n          style={\n            {\n              stroke: gaugePrimaryColor,\n              \"--stroke-percent\": currentPercent,\n              strokeDasharray:\n                \"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)\",\n              transition:\n                \"var(--transition-length) ease var(--delay),stroke var(--transition-length) ease var(--delay)\",\n              transitionProperty: \"stroke-dasharray,transform\",\n              transform:\n                \"rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))\",\n              transformOrigin:\n                \"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)\",\n            } as React.CSSProperties\n          }\n        />\n      </svg>\n      <span\n        data-current-value={currentPercent}\n        className=\"duration-[var(--transition-length)] delay-[var(--delay)] absolute inset-0 m-auto size-fit ease-linear animate-in fade-in\"\n      >\n        {currentPercent}\n      </span>\n    </div>\n  );\n}\n",
       "type": "registry:ui",
       "target": ""
     }

public/r/styles/default/animated-gradient-text.json

@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "magicui/animated-gradient-text.tsx",
-      "content": "import { ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport default function AnimatedGradientText({\n  children,\n  className,\n}: {\n  children: ReactNode;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        \"group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40\",\n        className,\n      )}\n    >\n      <div\n        className={`absolute inset-0 block h-full w-full animate-gradient bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] p-[1px] ![mask-composite:subtract] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]`}\n      />\n\n      {children}\n    </div>\n  );\n}\n",
+      "content": "import { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface AnimatedGradientTextProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  children: ReactNode;\n}\n\nexport function AnimatedGradientText({\n  children,\n  className,\n  ...props\n}: AnimatedGradientTextProps) {\n  return (\n    <div\n      className={cn(\n        \"group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40\",\n        className,\n      )}\n      {...props}\n    >\n      <div\n        className={`absolute inset-0 block h-full w-full animate-gradient bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] p-[1px] ![mask-composite:subtract] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]`}\n      />\n\n      {children}\n    </div>\n  );\n}\n",
       "type": "registry:ui",
       "target": ""
     }