TextArea converted to tailwind

src/components/TextArea/ControlledTextArea.tsx

@@ -1,10 +1,8 @@
 import { Control, Controller } from 'react-hook-form'
 
-import { PolymorphicProps } from '~/components/Box'
-
 import { TextArea, TextAreaProps } from './TextArea'
 
-type ControlledTextAreaProps = PolymorphicProps<TextAreaProps, 'input'> & {
+type ControlledTextAreaProps = TextAreaProps & {
   control: Control
   defaultValue?: string
   name: string

src/components/TextArea/TextArea.tsx

@@ -1,69 +1,89 @@
-import { clsx } from 'clsx'
-import { ElementType, forwardRef, ReactNode } from 'react'
+import { cva, VariantProps } from 'class-variance-authority'
+import { forwardRef, ReactNode } from 'react'
 
-import {
-  Box,
-  PolymorphicComponent,
-  PolymorphicProps,
-  PolymorphicRef,
-} from '~/components/Box'
 import { Field, FieldProps } from '~/components/Field'
+import { cn } from '~/utils'
 
-import * as styles from './styles.css'
+import { textVariants } from '../Text'
 
-export type TextAreaProps = FieldProps & {
-  disabled?: boolean
+const textareaVariants = cva(
+  [
+    textVariants({ variant: 'normal' }),
+    'block bg-transparent text-text-100 w-full p-4',
+    'outline-none ring-inset ring-1 ring-border-normal',
+    'cursor-text disabled:cursor-default disabled:opacity-50',
+    'focus:opacity-100 focus:ring-2 focus:ring-border-focus',
+    'placeholder-text-50',
+    'resize-none',
+  ],
+  {
+    variants: {
+      borderRadius: {
+        xs: 'rounded',
+        sm: 'rounded-lg',
+        md: 'rounded-xl',
+      },
+      resize: {
+        true: 'resize-y',
+        false: 'resize-none',
+      },
+    },
+    defaultVariants: {
+      borderRadius: 'md',
+      resize: false,
+    },
+  }
+)
+
+export interface TextAreaProps
+  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>,
+    FieldProps,
+    VariantProps<typeof textareaVariants> {
   name: string
   controls?: ReactNode
   value?: string
   rows?: number
   resize?: boolean
 }
 
-export const TextArea: PolymorphicComponent<TextAreaProps, 'textarea'> =
-  forwardRef(
-    <T extends ElementType>(
-      props: PolymorphicProps<TextAreaProps, T>,
-      ref: PolymorphicRef<T>
-    ) => {
-      const {
-        as = 'textarea',
-        autoComplete = 'off',
-        borderRadius = 'md',
-        description,
-        disabled = false,
-        id,
-        label = '',
-        labelLocation = 'hidden',
-        name,
-        rows,
-        resize = false,
-        ...rest
-      } = props
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (props, ref) => {
+    const {
+      autoComplete = 'off',
+      borderRadius = 'md',
+      description,
+      disabled = false,
+      id,
+      label = '',
+      labelLocation = 'hidden',
+      name,
+      rows,
+      resize = false,
+      className,
+      ...rest
+    } = props
 
-      return (
-        <Field
-          description={description}
+    return (
+      <Field
+        description={description}
+        disabled={disabled}
+        id={id ?? name}
+        label={label}
+        labelLocation={labelLocation}
+        className="grid"
+      >
+        <textarea
+          autoComplete={autoComplete}
+          spellCheck="false"
+          className={cn(textareaVariants({ borderRadius, resize }), className)}
           disabled={disabled}
-          display="grid"
           id={id ?? name}
-          label={label}
-          labelLocation={labelLocation}
-        >
-          <Box
-            as={as}
-            autoComplete={autoComplete}
-            spellCheck="false"
-            className={clsx(styles.textarea, resize && styles.resize)}
-            disabled={disabled}
-            id={id ?? name}
-            name={name}
-            ref={ref}
-            rows={rows}
-            borderRadius={borderRadius}
-            {...rest}
-          />
-        </Field>
-      )
-    }
-  )
+          name={name}
+          ref={ref}
+          rows={rows}
+          {...rest}
+        />
+      </Field>
+    )
+  }
+)

src/components/TextInput/ControlledTextInput.tsx

@@ -1,10 +1,8 @@
 import { Control, Controller } from 'react-hook-form'
 
-import { PolymorphicProps } from '~/components/Box'
-
 import { TextInput, TextInputProps } from './TextInput'
 
-type ControlledTextInputProps = PolymorphicProps<TextInputProps, 'input'> & {
+type ControlledTextInputProps = TextInputProps & {
   control: Control
   defaultValue?: string
   name: string