feat: update ui/input ui/textarea with error state styling

Author: wackerow

src/components/ui/input.tsx

@@ -4,16 +4,22 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils/cn"
 
 const inputVariants = cva(
-  "rounded border border-body placeholder:text-disabled hover:not-disabled:border-primary-hover focus-visible:outline focus-visible:outline-primary-hover focus-visible:outline-[3px] focus-visible:-outline-offset-2 disabled:cursor-not-allowed disabled:border-disabled bg-background",
+  "rounded border placeholder:text-disabled focus-visible:outline focus-visible:outline-[3px] focus-visible:-outline-offset-2 disabled:cursor-not-allowed disabled:border-disabled bg-background",
   {
     variants: {
       size: {
         md: "p-2",
         sm: "p-1 text-sm",
       },
+      hasError: {
+        true: "border-error hover:not-disabled:border-error focus-visible:outline-error",
+        false:
+          "border-body hover:not-disabled:border-primary-hover focus-visible:outline-primary-hover",
+      },
     },
     defaultVariants: {
       size: "md",
+      hasError: false,
     },
   }
 )
@@ -23,11 +29,11 @@ export interface InputProps
     VariantProps<typeof inputVariants> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, size, ...props }, ref) => {
+  ({ className, type, size, hasError, ...props }, ref) => {
     return (
       <input
         type={type}
-        className={cn(inputVariants({ size, className }))}
+        className={cn(inputVariants({ size, hasError, className }))}
         ref={ref}
         {...props}
       />

src/components/ui/textarea.tsx

@@ -4,16 +4,22 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils/cn"
 
 const textareaVariants = cva(
-  "focus-visible:outline focus-visible:outline-primary-hover focus-visible:outline-[3px] focus-visible:-outline-offset-2 flex min-h-[200px] w-full rounded border border-body bg-background px-3 py-2 text-base ring-offset-background placeholder:text-disabled disabled:cursor-not-allowed disabled:opacity-50 hover:not-disabled:border-primary-hover",
+  "focus-visible:outline focus-visible:outline-[3px] focus-visible:-outline-offset-2 flex min-h-[200px] w-full rounded border bg-background px-3 py-2 text-base ring-offset-background placeholder:text-disabled disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       size: {
         md: "p-2",
         sm: "p-1 text-sm",
       },
+      hasError: {
+        true: "border-error hover:not-disabled:border-error focus-visible:outline-error",
+        false:
+          "border-body hover:not-disabled:border-primary-hover focus-visible:outline-primary-hover",
+      },
     },
     defaultVariants: {
       size: "md",
+      hasError: false,
     },
   }
 )
@@ -23,10 +29,10 @@ export interface TextareaProps
     VariantProps<typeof textareaVariants> {}
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, size, ...props }, ref) => {
+  ({ className, size, hasError, ...props }, ref) => {
     return (
       <textarea
-        className={cn(textareaVariants({ size, className }))}
+        className={cn(textareaVariants({ size, hasError, className }))}
         ref={ref}
         {...props}
       />