refactor(react): Use CVA buttonVariant from styles

Author: Ehesp

packages/react/package.json

@@ -35,12 +35,12 @@
   },
   "peerDependencies": {
     "@firebase-ui/core": "workspace:*",
-    "@firebase-ui/styles": "workspace:*",
     "firebase": "catalog:peerDependencies",
     "react": "catalog:peerDependencies",
     "react-dom": "catalog:peerDependencies"
   },
   "dependencies": {
+    "@firebase-ui/styles": "workspace:*",
     "@nanostores/react": "^0.8.4",
     "@radix-ui/react-slot": "^1.2.3",
     "@tanstack/react-form": "^0.41.3",

packages/react/src/components/button.tsx

@@ -16,22 +16,15 @@
 
 import { ComponentProps } from "react";
 import { Slot } from "@radix-ui/react-slot";
+import { buttonVariant, type ButtonVariant } from "@firebase-ui/styles";
 import { cn } from "~/utils/cn";
 
-const buttonVariants = {
-  primary: "fui-button",
-  secondary: "fui-button fui-button--secondary",
-} as const;
-
-type ButtonVariant = keyof typeof buttonVariants;
-
 export type ButtonProps = ComponentProps<"button"> & {
   variant?: ButtonVariant;
   asChild?: boolean;
 };
 
 export function Button({ className, variant = "primary", asChild, ...props }: ButtonProps) {
   const Comp = asChild ? Slot : "button";
-
-  return <Comp className={cn(buttonVariants[variant], className)} {...props} />;
+  return <Comp className={cn(buttonVariant({ variant }), className)} {...props} />;
 }

packages/react/tsconfig.app.json

@@ -24,7 +24,8 @@
     "baseUrl": ".",
     "paths": {
       "~/*": ["./src/*"],
-      "@firebase-ui/core": ["../core/src/index.ts"]
+      "@firebase-ui/core": ["../core/src/index.ts"],
+      "@firebase-ui/styles": ["../styles/src/index.ts"]
     }
   },
   "include": ["src"]

packages/react/tsconfig.node.json

@@ -22,7 +22,8 @@
     "baseUrl": ".",
     "paths": {
       "~/*": ["./src/*"],
-      "@firebase-ui/core": ["../core/src/index.ts"]
+      "@firebase-ui/core": ["../core/src/index.ts"],
+      "@firebase-ui/styles": ["../styles/src/index.ts"]
     }
   },
   "include": ["vite.config.ts"]