feat: add TextArea

packages/ui/fixtures/textArea.fixture.tsx

@@ -0,0 +1,15 @@
+import { useState } from "react";
+
+import { TextArea } from "../lib/main";
+
+export default function Fixture() {
+  const [textAreaValue, setTextAreaValue] = useState("Hello, world!");
+  return (
+    <div style={{ padding: "2rem" }}>
+      <TextArea
+        onChange={(e) => setTextAreaValue(e.target.value)}
+        value={textAreaValue}
+      />
+    </div>
+  );
+}

packages/ui/lib/TextArea/index.tsx

@@ -0,0 +1,14 @@
+import { forwardRef } from "react";
+
+import { TextAreaProps, useTextArea } from "./useTextArea";
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (props, ref) => {
+    const { textAreaProps, textAreaRef } = useTextArea({
+      props,
+      forwardedRef: ref,
+    });
+
+    return <textarea ref={textAreaRef} {...textAreaProps} />;
+  },
+);

packages/ui/lib/TextArea/styles.module.css

@@ -0,0 +1,23 @@
+.textArea {
+  box-sizing: border-box;
+  font-size: 1em;
+  line-height: var(--sys42-input-text-line-height);
+  background: var(--sys42-input-text-background);
+  border: var(--sys42-input-text-border-width) solid
+    var(--sys42-input-text-border-color);
+  border-radius: var(--sys42-input-text-border-radius);
+  padding: calc(
+      var(--sys42-input-text-padding-vert) -
+        var(--sys42-input-text-border-width)
+    )
+    calc(
+      var(--sys42-input-text-padding-horiz) -
+        var(--sys42-input-text-border-width)
+    );
+}
+
+.textArea:focus,
+.textArea:focus-visible {
+  outline: var(--sys42-focus-outline);
+  outline-offset: var(--sys42-focus-outline-offset);
+}

packages/ui/lib/TextArea/useBaseTextArea.ts

@@ -0,0 +1,28 @@
+import React from "react";
+
+// Define specific props for the component
+interface TextAreaProps {}
+
+export type BaseTextAreaProps = Sys42Props<
+  TextAreaProps,
+  React.ComponentProps<"textarea">
+>;
+
+export type UseBaseTextAreaOptions<Props> = {
+  props: Props;
+  forwardedRef: React.ForwardedRef<HTMLTextAreaElement>;
+};
+
+export function useBaseTextArea<Props extends BaseTextAreaProps>({
+  props,
+  forwardedRef,
+}: UseBaseTextAreaOptions<Props>) {
+  const textAreaProps: React.ComponentProps<"textarea"> = {
+    ...props,
+  };
+
+  return {
+    textAreaProps,
+    textAreaRef: forwardedRef,
+  };
+}

packages/ui/lib/TextArea/useTextArea.ts

@@ -0,0 +1,22 @@
+import { cn } from "@sys42/utils";
+
+import {
+  BaseTextAreaProps,
+  useBaseTextArea,
+  UseBaseTextAreaOptions,
+} from "./useBaseTextArea";
+
+import styles from "./styles.module.css";
+
+export type TextAreaProps = BaseTextAreaProps;
+
+export function useTextArea(options: UseBaseTextAreaOptions<TextAreaProps>) {
+  const textArea = useBaseTextArea(options);
+
+  textArea.textAreaProps.className = cn(
+    styles.textArea,
+    textArea.textAreaProps.className,
+  );
+
+  return textArea;
+}

packages/ui/lib/main.ts

@@ -3,13 +3,15 @@ export { FormField } from "./FormField";
 export { Label } from "./Label";
 export { OverflowMenu } from "./OverflowMenu";
 export { Stack } from "./Stack";
+export { TextArea } from "./TextArea";
 export { TextLink, TextLinkButton } from "./TextLink";
 export { TextInput } from "./TextInput";
 
 export { useButton } from "./Button/useButton";
 export { useFormField } from "./FormField/useFormField";
 export { useLabel } from "./Label/useLabel";
 export { useStack } from "./Stack/useStack";
+export { useTextArea } from "./TextArea/useTextArea";
 export { useTextLink } from "./TextLink/useTextLink";
 export { useTextInput } from "./TextInput/useTextInput";
 
@@ -18,6 +20,7 @@ export { useBaseFormField } from "./FormField/useBaseFormField";
 export { useBaseLabel } from "./Label/useBaseLabel";
 export { useBaseOverflowMenu } from "./OverflowMenu/useBaseOverflowMenu";
 export { useBaseStack } from "./Stack/useBaseStack";
+export { useBaseTextArea } from "./TextArea/useBaseTextArea";
 export { useBaseTextLink } from "./TextLink/useBaseTextLink";
 export { useBaseTextInput } from "./TextInput/useBaseTextInput";