fix: renaming button variant to valid (much better)

Author: elitalpa

apps/web/public/r/button-variants-demo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "src/registry/blocks/button-variants-demo.tsx",
-      "content": "import { Button } from \"@/components/utilui/button\";\r\n\r\nexport default function ButtonVariantsDemo() {\r\n  return (\r\n    <div className=\"flex flex-col gap-3\">\r\n      <Button>Default Button</Button>\r\n      <Button variant={\"secondary\"}>Secondary Button</Button>\r\n      <Button variant={\"destructive\"}>Destructive Button</Button>\r\n      <Button variant={\"validate\"}>Validate button</Button>\r\n      <Button variant={\"outline\"}>Outline button</Button>\r\n      <Button variant={\"ghost\"}>Ghost button</Button>\r\n      <Button variant={\"link\"}>Link button</Button>\r\n    </div>\r\n  );\r\n}\r\n",
+      "content": "import { Button } from \"@/components/utilui/button\";\r\n\r\nexport default function ButtonVariantsDemo() {\r\n  return (\r\n    <div className=\"flex flex-col gap-3\">\r\n      <Button>Default Button</Button>\r\n      <Button variant={\"secondary\"}>Secondary Button</Button>\r\n      <Button variant={\"destructive\"}>Destructive Button</Button>\r\n      <Button variant={\"valid\"}>Valid Button</Button>\r\n      <Button variant={\"outline\"}>Outline Button</Button>\r\n      <Button variant={\"ghost\"}>Ghost Button</Button>\r\n      <Button variant={\"link\"}>Link Button</Button>\r\n    </div>\r\n  );\r\n}\r\n",
       "type": "registry:block",
       "target": "components/utilui/button-variants-demo.tsx"
     }

apps/web/public/r/button.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "src/registry/components/button.tsx",
-      "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        validate: \"bg-green-500 text-white hover:bg-green-500/90\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, ...props }, ref) => {\n    return (\n      <button\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n",
+      "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        valid: \"bg-green-500 text-white hover:bg-green-500/90\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, ...props }, ref) => {\n    return (\n      <button\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n",
       "type": "registry:component",
       "target": "components/utilui/button.tsx"
     }

apps/web/src/components/utilui/button-variants-demo.tsx

@@ -6,10 +6,10 @@ export default function ButtonVariantsDemo() {
       <Button>Default Button</Button>
       <Button variant={"secondary"}>Secondary Button</Button>
       <Button variant={"destructive"}>Destructive Button</Button>
-      <Button variant={"validate"}>Validate button</Button>
-      <Button variant={"outline"}>Outline button</Button>
-      <Button variant={"ghost"}>Ghost button</Button>
-      <Button variant={"link"}>Link button</Button>
+      <Button variant={"valid"}>Valid Button</Button>
+      <Button variant={"outline"}>Outline Button</Button>
+      <Button variant={"ghost"}>Ghost Button</Button>
+      <Button variant={"link"}>Link Button</Button>
     </div>
   );
 }

apps/web/src/components/utilui/button.tsx

@@ -13,7 +13,7 @@ const buttonVariants = cva(
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        validate: "bg-green-500 text-white hover:bg-green-500/90",
+        valid: "bg-green-500 text-white hover:bg-green-500/90",
         outline:
           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         ghost: "hover:bg-accent hover:text-accent-foreground",

apps/web/src/registry/blocks/button-variants-demo.tsx

@@ -6,10 +6,10 @@ export default function ButtonVariantsDemo() {
       <Button>Default Button</Button>
       <Button variant={"secondary"}>Secondary Button</Button>
       <Button variant={"destructive"}>Destructive Button</Button>
-      <Button variant={"validate"}>Validate button</Button>
-      <Button variant={"outline"}>Outline button</Button>
-      <Button variant={"ghost"}>Ghost button</Button>
-      <Button variant={"link"}>Link button</Button>
+      <Button variant={"valid"}>Valid Button</Button>
+      <Button variant={"outline"}>Outline Button</Button>
+      <Button variant={"ghost"}>Ghost Button</Button>
+      <Button variant={"link"}>Link Button</Button>
     </div>
   );
 }

apps/web/src/registry/components/button.tsx

@@ -13,7 +13,7 @@ const buttonVariants = cva(
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        validate: "bg-green-500 text-white hover:bg-green-500/90",
+        valid: "bg-green-500 text-white hover:bg-green-500/90",
         outline:
           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         ghost: "hover:bg-accent hover:text-accent-foreground",