break variants out of component exports for fast-refresh

packages/react/src/shadcn/ui/button.tsx

@@ -1,37 +1,9 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { type VariantProps } from "class-variance-authority"
 // import './button.css'
 import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition focus-visible:outline-none focus-visible:ring-1 active:scale-[97%] disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary-9 text-base-12 hover:bg-primaryA-5 focus-visible:ring-primary-7 active:bg-primaryA-7",
-        outline:
-          "border border-primary-7 bg-transparent hover:border-primaryA-8 hover:bg-primaryA-5 focus-visible:ring-primary-7",
-        secondary:
-          "bg-secondary-9 text-base-12 hover:bg-secondaryA-4 focus-visible:ring-secondary-7 ",
-        ghost: "hover:bg-primary-4 hover:text-base-12 focus-visible:ring-primary-7 active:bg-primaryA-7",
-        link: "text-primary underline-offset-4 hover:underline focus-visible:underline focus-visible:ring-secondary-7",
-      },
-      size: {
-        default: "h-8 gap-2 px-3.5 py-2",
-        sm: "h-6 gap-1.5 rounded-md px-1 text-xs",
-        lg: "h-10 gap-3 rounded-md px-6 text-lg ",
-        icon: "h-8 w-8",
-        "icon-lg": "h-10 w-10 text-lg",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+import { buttonVariants } from "./button.variants"
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -53,4 +25,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 )
 Button.displayName = "Button"
 
-export { Button, buttonVariants }
+export { Button }

packages/react/src/shadcn/ui/button.variants.ts

@@ -0,0 +1,27 @@
+import { cva } from "class-variance-authority";
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition focus-visible:outline-none focus-visible:ring-1 active:scale-[97%] disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary-9 text-base-12 hover:bg-primaryA-5 focus-visible:ring-primary-7 active:bg-primaryA-7",
+        outline: "border border-primary-7 bg-transparent hover:border-primaryA-8 hover:bg-primaryA-5 focus-visible:ring-primary-7",
+        secondary: "bg-secondary-9 text-base-12 hover:bg-secondaryA-4 focus-visible:ring-secondary-7 ",
+        ghost: "hover:bg-primary-4 hover:text-base-12 focus-visible:ring-primary-7 active:bg-primaryA-7",
+        link: "text-primary underline-offset-4 hover:underline focus-visible:underline focus-visible:ring-secondary-7",
+      },
+      size: {
+        default: "h-8 gap-2 px-3.5 py-2",
+        sm: "h-6 gap-1.5 rounded-md px-1 text-xs",
+        lg: "h-10 gap-3 rounded-md px-6 text-lg ",
+        icon: "h-8 w-8",
+        "icon-lg": "h-10 w-10 text-lg",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);

packages/react/src/shadcn/ui/dialog.tsx

@@ -3,8 +3,9 @@ import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { Cross2Icon } from "@radix-ui/react-icons"
 
 import { cn } from "@/lib/utils"
-import { type VariantProps, cva } from "class-variance-authority"
+import { type VariantProps } from "class-variance-authority"
 import { badgeVariants } from "./badge"
+import { dialogVariants } from "./dialog.variants"
 
 const Dialog = DialogPrimitive.Root
 
@@ -27,19 +28,6 @@ const DialogOverlay = React.forwardRef<
 ))
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
-const dialogVariants = cva(
-  "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
-  {
-    variants: {
-      variant: {
-        default: "border-base-7 bg-base-1",
-        primary: "border-primary-7 bg-primary-1",
-        secondary: "border-secondary-7 bg-secondary-1",
-      },
-    },
-  }
-);
-
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & VariantProps<typeof dialogVariants>
@@ -124,7 +112,6 @@ export {
   DialogPortal,
   DialogOverlay,
   DialogTrigger,
-  dialogVariants,
   DialogContent,
   DialogHeader,
   DialogFooter,

packages/react/src/shadcn/ui/dialog.variants.ts

@@ -0,0 +1,14 @@
+import { cva } from "class-variance-authority";
+
+export const dialogVariants = cva(
+  "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+  {
+    variants: {
+      variant: {
+        default: "border-base-7 bg-base-1",
+        primary: "border-primary-7 bg-primary-1",
+        secondary: "border-secondary-7 bg-secondary-1",
+      },
+    },
+  }
+);