Dashboard/ui/components/TextArea/TextArea.tsx

"use client";
/*
 * Documentation:
 * Text Area — https://app.subframe.com/f023064a5ca0/library?component=Text+Area_4ec05ee8-8f1c-46b2-b863-5419aa7f5cce
 */

import React from "react";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";

export interface InputProps
  extends Omit<
    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
    "placeholder" | "value"
  > {
  placeholder?: React.ReactNode;
  value?: React.ReactNode;
  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
  className?: string;
}

const Input = React.forwardRef<HTMLTextAreaElement, InputProps>(function Input(
  { placeholder, value, className, ...otherProps }: InputProps,
  ref
) {
  return (
    <textarea
      className={SubframeUtils.twClassNames(
        "min-h-[96px] w-full border-none bg-transparent px-3 py-2 text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-secondary outline-none placeholder:text-text-neutral-subtle",
        className
      )}
      placeholder={placeholder as string}
      value={value as string}
      ref={ref}
      {...otherProps}
    />
  );
});

export interface TextAreaRootProps
  extends React.LabelHTMLAttributes<HTMLLabelElement> {
  error?: boolean;
  variant?: "outline" | "filled";
  borderless?: boolean;
  noPadding?: boolean;
  fillContainer?: boolean;
  showLabel?: boolean;
  label?: React.ReactNode;
  helpText?: React.ReactNode;
  children?: React.ReactNode;
  errorText?: React.ReactNode;
  message?: React.ReactNode;
  className?: string;
}

const TextAreaRoot = React.forwardRef<HTMLLabelElement, TextAreaRootProps>(
  function TextAreaRoot(
    {
      error = false,
      variant = "outline",
      borderless = false,
      noPadding = false,
      fillContainer = false,
      showLabel = false,
      label,
      helpText,
      children,
      errorText,
      message,
      className,
      ...otherProps
    }: TextAreaRootProps,
    ref
  ) {
    return (
      <label
        className={SubframeUtils.twClassNames(
          "group/4ec05ee8 flex w-full min-w-[192px] max-w-[576px] cursor-pointer flex-col items-start gap-1",
          { "h-full max-w-none": fillContainer },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <div
          className={SubframeUtils.twClassNames(
            "flex w-full flex-col items-start gap-4",
            { "gap-1.5": showLabel, grow: fillContainer, "gap-1": error }
          )}
        >
          <div
            className={SubframeUtils.twClassNames(
              "hidden flex-col items-start gap-1.5",
              { flex: showLabel }
            )}
          >
            {label ? (
              <span
                className={SubframeUtils.twClassNames(
                  "text-body-default-medium-0 font-body-default-medium-0 text-text-neutral-secondary",
                  { "text-text-feedback-negative": error }
                )}
              >
                {label}
              </span>
            ) : null}
            {helpText ? (
              <span
                className={SubframeUtils.twClassNames(
                  "text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary",
                  { "text-text-feedback-negative": error }
                )}
              >
                {helpText}
              </span>
            ) : null}
          </div>
          {children ? (
            <div
              className={SubframeUtils.twClassNames(
                "flex w-full flex-col items-start rounded-sm border border-solid border-border-strong bg-surface-neutral-primary group-hover/4ec05ee8:border group-hover/4ec05ee8:border-solid group-hover/4ec05ee8:border-brand-brand-border-solid-hover group-hover/4ec05ee8:bg-surface-neutral-secondary group-focus-within/4ec05ee8:border-2 group-focus-within/4ec05ee8:border-solid group-focus-within/4ec05ee8:border-brand-brand-border-solid-default group-focus-within/4ec05ee8:bg-surface-neutral-secondary",
                {
                  "grow [&_textarea]:grow": fillContainer,
                  "[&_textarea]:px-0 [&_textarea]:py-0": noPadding,
                  "border-none group-hover/4ec05ee8:border-none group-hover/4ec05ee8:group-hover/4ec05ee8:[&&]:border-none group-hover/4ec05ee8:group-hover/4ec05ee8:group-hover/4ec05ee8:[&&]:border-none group-hover/4ec05ee8:group-hover/4ec05ee8:group-hover/4ec05ee8:group-hover/4ec05ee8:[&&]:border-none group-hover/4ec05ee8:group-hover/4ec05ee8:group-hover/4ec05ee8:group-hover/4ec05ee8:group-hover/4ec05ee8:[&&]:border-none group-hover/4ec05ee8:group-hover/4ec05ee8:group-hover/4ec05ee8:group-hover/4ec05ee8:group-hover/4ec05ee8:group-hover/4ec05ee8:[&&]:border-none group-focus-within/4ec05ee8:border-none group-focus-within/4ec05ee8:group-focus-within/4ec05ee8:[&&]:border-none group-focus-within/4ec05ee8:group-focus-within/4ec05ee8:group-focus-within/4ec05ee8:[&&]:border-none group-focus-within/4ec05ee8:group-focus-within/4ec05ee8:group-focus-within/4ec05ee8:group-focus-within/4ec05ee8:[&&]:border-none group-focus-within/4ec05ee8:group-focus-within/4ec05ee8:group-focus-within/4ec05ee8:group-focus-within/4ec05ee8:group-focus-within/4ec05ee8:[&&]:border-none":
                    borderless,
                  "bg-surface-neutral-secondary": variant === "filled",
                  "border border-solid border-border-negative-solid [&_textarea]:text-text-feedback-negative [&_textarea]:placeholder:text-text-feedback-negative group-hover/4ec05ee8:border group-hover/4ec05ee8:border-solid group-hover/4ec05ee8:border-border-negative-solid group-focus-within/4ec05ee8:border-2 group-focus-within/4ec05ee8:border-solid group-focus-within/4ec05ee8:border-border-negative-solid":
                    error,
                }
              )}
            >
              {children}
            </div>
          ) : null}
          {errorText ? (
            <span
              className={SubframeUtils.twClassNames(
                "hidden text-body-extra-small-regular-0 font-body-extra-small-regular-0 text-text-feedback-negative",
                { inline: error }
              )}
            >
              {errorText}
            </span>
          ) : null}
        </div>
      </label>
    );
  }
);

export const TextArea = Object.assign(TextAreaRoot, {
  Input,
});