Text Area

<TextArea
  className="w-72"
  hint="Optional hint"
  label="Label"
  placeholder="Placeholder text"
/>

<TextArea.Root className="w-72" maxLength={50}>
  <TextArea.Label>Label</TextArea.Label>
  <TextArea.Counter />
  <TextArea.Input placeholder="Placeholder text" />
  <TextArea.Hint>Optional hint</TextArea.Hint>
  <TextArea.ErrorText>Optional error text</TextArea.ErrorText>
</TextArea.Root>

<TextArea className="w-72" counter label="Counter without maxLength" />
<TextArea
  className="w-72"
  label="Counter with maxLength"
  maxLength={10}
/>
<TextArea
  className="w-72"
  counterProps={{
    display: (count, max) =>
      max ? `${count} of ${max} characters` : `${count} characters`,
  }}
  label="Custom counter display"
  maxLength={10}
/>

<TextArea className="w-56" defaultValue="sm" size="sm" />
<TextArea className="w-60" defaultValue="md" />
<TextArea className="w-64" defaultValue="lg" size="lg" />

<TextArea disabled label="Disabled" placeholder="Disabled" />
<TextArea label="Read only" placeholder="Read only" readOnly />
<TextArea label="Required" placeholder="Required" required />
<TextArea
  errorText="Invalid"
  invalid
  label="Invalid"
  placeholder="Invalid"
/>

import {type ReactElement, useState} from "react"

import {Button} from "@qualcomm-ui/react/button"
import {TextArea} from "@qualcomm-ui/react/text-area"

export function TextAreaControlledStateDemo(): ReactElement {
  const [value, setValue] = useState<string>("Controlled value")

  return (
    <div className="flex items-end gap-4">
      <TextArea.Root
        className="w-72"
        onValueChange={(updatedValue) => {
          console.debug("Value changed:", updatedValue)
          setValue(updatedValue)
        }}
        value={value}
      >
        <TextArea.Label>Label</TextArea.Label>
        <TextArea.Input placeholder="Placeholder text" />
      </TextArea.Root>

      <Button emphasis="primary" onClick={() => setValue("")} variant="outline">
        Reset
      </Button>
    </div>
  )
}

<TextArea
  className="w-72"
  errorText="You must enter at least 10 characters."
  invalid={value.length < 10}
  label="Label"
  onValueChange={setValue}
  placeholder="Enter at least 10 characters"
  required
  value={value}
/>

import {arktypeResolver} from "@hookform/resolvers/arktype"
import {type} from "arktype"
import {Controller, useForm} from "react-hook-form"

import {Button} from "@qualcomm-ui/react/button"
import {TextArea} from "@qualcomm-ui/react/text-area"

interface FormData {
  feedback: string
}

const FormSchema = type({
  feedback: type("string>=10").configure({
    message: "Feedback must be at least 10 characters long",
  }),
})

export function TextAreaReactHookFormDemo() {
  const {control, handleSubmit} = useForm<FormData>({
    defaultValues: {feedback: ""},
    resolver: arktypeResolver(FormSchema),
  })

  return (
    <form
      className="mx-auto flex w-full max-w-sm flex-col gap-3"
      noValidate
      onSubmit={(e) => {
        void handleSubmit((data) => console.log(data))(e)
      }}
    >
      <Controller
        control={control}
        name="feedback"
        render={({field: {onChange, ...fieldProps}, fieldState: {error}}) => (
          <TextArea
            className="w-full"
            counter
            errorText={error?.message}
            hint="Minimum 10 characters"
            invalid={!!error}
            label="Feedback"
            onValueChange={onChange}
            placeholder="Tell us about your experience"
            required
            {...fieldProps}
          />
        )}
      />

      <div className="flex w-full justify-end">
        <Button emphasis="primary" type="submit" variant="fill">
          Send Feedback
        </Button>
      </div>
    </form>
  )
}

import {useForm} from "@tanstack/react-form"

import {Button} from "@qualcomm-ui/react/button"
import {TextArea} from "@qualcomm-ui/react/text-area"

interface FeedbackFormData {
  feedback: string
}

export function TextAreaTanstackFormDemo() {
  const form = useForm({
    defaultValues: {
      feedback: "",
    } satisfies FeedbackFormData,
    onSubmit: ({value}) => {
      // Handle successful submission
      console.log("Form submitted:", value)
    },
  })

  return (
    <form
      className="mx-auto flex w-full max-w-sm flex-col gap-3"
      onSubmit={(e) => {
        e.preventDefault()
        void form.handleSubmit()
      }}
    >
      <form.Field
        name="feedback"
        validators={{
          onChange: ({value}) => {
            if (!value || value.trim().length < 10) {
              return "Feedback must be at least 10 characters long"
            }
            return undefined
          },
        }}
      >
        {(field) => (
          <TextArea
            className="w-full"
            counter
            errorText={field.state.meta.errors?.[0]}
            hint="Minimum 10 characters"
            invalid={field.state.meta.errors.length > 0}
            label="Feedback"
            name={field.name}
            onBlur={field.handleBlur}
            onValueChange={field.handleChange}
            placeholder="Tell us about your experience"
            value={field.state.value}
          />
        )}
      </form.Field>

      <div className="flex w-full justify-end">
        <Button
          disabled={form.state.isSubmitting}
          emphasis="primary"
          type="submit"
          variant="fill"
        >
          Send Feedback
        </Button>
      </div>
    </form>
  )
}