fix: Fix the shiny button component

Author: LubomirGeorgiev

components.json

@@ -10,12 +10,15 @@
     "cssVariables": true,
     "prefix": ""
   },
+  "iconLibrary": "lucide",
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
     "ui": "@/components/ui",
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "iconLibrary": "lucide"
-}
+  "registries": {
+    "@magicui": "https://magicui.design/r/{name}.json"
+  }
+}

src/components/ui/shiny-button.tsx

@@ -1,14 +1,11 @@
-"use client";
+"use client"
 
-import React from "react";
-import {
-  motion,
-  type AnimationProps,
-  type HTMLMotionProps,
-} from "motion/react";
-import { cn } from "@/lib/utils";
+import React from "react"
+import { motion, type MotionProps } from "motion/react"
 
-const animationProps = {
+import { cn } from "@/lib/utils"
+
+const animationProps: MotionProps = {
   initial: { "--x": "100%", scale: 0.8 },
   animate: { "--x": "-100%", scale: 1 },
   whileTap: { scale: 0.95 },
@@ -27,50 +24,52 @@ const animationProps = {
       mass: 0.5,
     },
   },
-} as AnimationProps;
+}
 
-interface ShinyButtonProps extends HTMLMotionProps<"button"> {
-  children: React.ReactNode;
-  className?: string;
-  ref?: React.Ref<HTMLButtonElement>;
+interface ShinyButtonProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps>,
+    MotionProps {
+  children: React.ReactNode
+  className?: string
 }
 
-/**
- * https://magicui.design/docs/components/shiny-button
-*/
-const ShinyButton = React.forwardRef<HTMLButtonElement, ShinyButtonProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <motion.button
-        ref={ref}
-        {...animationProps}
-        {...props}
-        className={cn(
-          "relative rounded-lg px-6 py-2 font-medium backdrop-blur-xl transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,hsl(var(--primary)/10%)_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_hsl(var(--primary)/10%)]",
-          className,
-        )}
+export const ShinyButton = React.forwardRef<
+  HTMLButtonElement,
+  ShinyButtonProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <motion.button
+      ref={ref}
+      className={cn(
+        "relative cursor-pointer rounded-lg border px-6 py-2 font-medium backdrop-blur-xl transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,var(--primary)/10%_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_var(--primary)/10%]",
+        className
+      )}
+      {...animationProps}
+      {...props}
+    >
+      <span
+        className="relative block size-full text-sm tracking-wide text-[rgb(0,0,0,65%)] uppercase dark:font-light dark:text-[rgb(255,255,255,90%)]"
+        style={{
+          maskImage:
+            "linear-gradient(-75deg,var(--primary) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),var(--primary) calc(var(--x) + 100%))",
+        }}
       >
-        <span
-          className="relative block size-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]"
-          style={{
-            maskImage:
-              "linear-gradient(-75deg,hsl(var(--primary)) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),hsl(var(--primary)) calc(var(--x) + 100%))",
-          }}
-        >
-          {children}
-        </span>
-        <span
-          style={{
-            mask: "linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box,linear-gradient(rgb(0,0,0), rgb(0,0,0))",
-            maskComposite: "exclude",
-          }}
-          className="absolute inset-0 z-10 block rounded-[inherit] bg-[linear-gradient(-75deg,hsl(var(--primary)/10%)_calc(var(--x)+20%),hsl(var(--primary)/50%)_calc(var(--x)+25%),hsl(var(--primary)/10%)_calc(var(--x)+100%))] p-px"
-        ></span>
-      </motion.button>
-    );
-  },
-);
+        {children}
+      </span>
+      <span
+        style={{
+          mask: "linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box exclude,linear-gradient(rgb(0,0,0), rgb(0,0,0))",
+          WebkitMask:
+            "linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box exclude,linear-gradient(rgb(0,0,0), rgb(0,0,0))",
+          backgroundImage:
+            "linear-gradient(-75deg,var(--primary)/10% calc(var(--x)+20%),var(--primary)/50% calc(var(--x)+25%),var(--primary)/10% calc(var(--x)+100%))",
+        }}
+        className="absolute inset-0 z-10 block rounded-[inherit] p-px"
+      />
+    </motion.button>
+  )
+})
 
-ShinyButton.displayName = "ShinyButton";
+ShinyButton.displayName = "ShinyButton"
 
 export default ShinyButton;