@lattice-ui/textarea 0.3.0

package/README.md

@@ -0,0 +1,18 @@
+# @lattice-ui/textarea
+
+Headless multi-line text input primitives for Roblox UI with optional auto-resize behavior.
+
+## Exports
+
+- `Textarea`
+- `Textarea.Root`
+- `Textarea.Input`
+- `Textarea.Label`
+- `Textarea.Description`
+- `Textarea.Message`
+
+## Notes
+
+- Supports controlled/uncontrolled `value`.
+- `autoResize` is enabled by default and respects `minRows`/`maxRows`.
+- `onValueCommit` fires on `FocusLost` commit moments.

package/out/Textarea/TextareaDescription.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { TextareaDescriptionProps } from "./types";
+export declare function TextareaDescription(props: TextareaDescriptionProps): React.JSX.Element;

package/out/Textarea/TextareaDescription.luau

@@ -0,0 +1,31 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local useTextareaContext = TS.import(script, script.Parent, "context").useTextareaContext
+local function TextareaDescription(props)
+	local textareaContext = useTextareaContext()
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[TextareaDescription] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			Name = "TextareaDescription",
+			Text = "Description",
+		}, child)
+	end
+	return React.createElement("textlabel", {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(300, 20),
+		Text = "Description",
+		TextColor3 = if textareaContext.disabled then Color3.fromRGB(132, 139, 154) else Color3.fromRGB(170, 179, 195),
+		TextSize = 13,
+		TextXAlignment = Enum.TextXAlignment.Left,
+	})
+end
+return {
+	TextareaDescription = TextareaDescription,
+}

package/out/Textarea/TextareaInput.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { TextareaInputProps } from "./types";
+export declare function TextareaInput(props: TextareaInputProps): React.JSX.Element;

package/out/Textarea/TextareaInput.luau

@@ -0,0 +1,109 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local resolveTextareaHeight = TS.import(script, script.Parent, "autoResize").resolveTextareaHeight
+local useTextareaContext = TS.import(script, script.Parent, "context").useTextareaContext
+local function toTextBox(instance)
+	if not instance or not instance:IsA("TextBox") then
+		return nil
+	end
+	return instance
+end
+local function TextareaInput(props)
+	local textareaContext = useTextareaContext()
+	local disabled = textareaContext.disabled or props.disabled == true
+	local readOnly = textareaContext.readOnly or props.readOnly == true
+	local _condition = props.lineHeight
+	if _condition == nil then
+		_condition = 18
+	end
+	local lineHeight = _condition
+	local setInputRef = React.useCallback(function(instance)
+		textareaContext.inputRef.current = toTextBox(instance)
+	end, { textareaContext.inputRef })
+	local applyAutoResize = React.useCallback(function(textBox)
+		if not textareaContext.autoResize then
+			return nil
+		end
+		local height = resolveTextareaHeight(textBox.Text, {
+			lineHeight = lineHeight,
+			minRows = textareaContext.minRows,
+			maxRows = textareaContext.maxRows,
+			verticalPadding = 14,
+		})
+		local currentSize = textBox.Size
+		if currentSize.Y.Offset ~= height or currentSize.Y.Scale ~= 0 then
+			textBox.Size = UDim2.fromOffset(currentSize.X.Offset, height)
+		end
+	end, { lineHeight, textareaContext.autoResize, textareaContext.maxRows, textareaContext.minRows })
+	local handleTextChanged = React.useCallback(function(textBox)
+		if disabled or readOnly then
+			if textBox.Text ~= textareaContext.value then
+				textBox.Text = textareaContext.value
+			end
+			applyAutoResize(textBox)
+			return nil
+		end
+		textareaContext.setValue(textBox.Text)
+		applyAutoResize(textBox)
+	end, { applyAutoResize, disabled, readOnly, textareaContext })
+	local handleFocusLost = React.useCallback(function(textBox)
+		if disabled then
+			return nil
+		end
+		textareaContext.commitValue(textBox.Text)
+	end, { disabled, textareaContext })
+	React.useEffect(function()
+		local input = textareaContext.inputRef.current
+		if not input then
+			return nil
+		end
+		applyAutoResize(input)
+	end, { applyAutoResize, textareaContext.inputRef, textareaContext.value })
+	local sharedProps = {
+		Active = not disabled,
+		ClearTextOnFocus = false,
+		MultiLine = true,
+		Selectable = not disabled,
+		Text = textareaContext.value,
+		TextEditable = not disabled and not readOnly,
+		TextWrapped = true,
+		Change = {
+			Text = handleTextChanged,
+		},
+		Event = {
+			FocusLost = handleFocusLost,
+		},
+		ref = setInputRef,
+	}
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[TextareaInput] `asChild` requires a child element.")
+		end
+		local _attributes = table.clone(sharedProps)
+		setmetatable(_attributes, nil)
+		return React.createElement(Slot, _attributes, child)
+	end
+	local _attributes = table.clone(sharedProps)
+	setmetatable(_attributes, nil)
+	_attributes.BackgroundColor3 = Color3.fromRGB(39, 46, 61)
+	_attributes.BorderSizePixel = 0
+	_attributes.PlaceholderText = "Type..."
+	_attributes.Size = UDim2.fromOffset(240, 68)
+	_attributes.TextColor3 = if disabled then Color3.fromRGB(137, 145, 162) else Color3.fromRGB(235, 240, 248)
+	_attributes.TextSize = 15
+	_attributes.TextXAlignment = Enum.TextXAlignment.Left
+	_attributes.TextYAlignment = Enum.TextYAlignment.Top
+	return React.createElement("textbox", _attributes, React.createElement("uipadding", {
+		PaddingBottom = UDim.new(0, 7),
+		PaddingLeft = UDim.new(0, 10),
+		PaddingRight = UDim.new(0, 10),
+		PaddingTop = UDim.new(0, 7),
+	}))
+end
+return {
+	TextareaInput = TextareaInput,
+}

package/out/Textarea/TextareaLabel.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { TextareaLabelProps } from "./types";
+export declare function TextareaLabel(props: TextareaLabelProps): React.JSX.Element;

package/out/Textarea/TextareaLabel.luau

@@ -0,0 +1,49 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local useTextareaContext = TS.import(script, script.Parent, "context").useTextareaContext
+local function TextareaLabel(props)
+	local textareaContext = useTextareaContext()
+	local disabled = textareaContext.disabled
+	local handleActivated = React.useCallback(function()
+		if disabled then
+			return nil
+		end
+		local _result = textareaContext.inputRef.current
+		if _result ~= nil then
+			_result:CaptureFocus()
+		end
+	end, { disabled, textareaContext.inputRef })
+	local sharedProps = {
+		Active = not disabled,
+		Selectable = not disabled,
+		Text = "Label",
+		Event = {
+			Activated = handleActivated,
+		},
+	}
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[TextareaLabel] `asChild` requires a child element.")
+		end
+		local _attributes = table.clone(sharedProps)
+		setmetatable(_attributes, nil)
+		return React.createElement(Slot, _attributes, child)
+	end
+	local _attributes = table.clone(sharedProps)
+	setmetatable(_attributes, nil)
+	_attributes.AutoButtonColor = false
+	_attributes.BackgroundTransparency = 1
+	_attributes.BorderSizePixel = 0
+	_attributes.Size = UDim2.fromOffset(240, 22)
+	_attributes.TextColor3 = if disabled then Color3.fromRGB(149, 157, 173) else Color3.fromRGB(225, 231, 241)
+	_attributes.TextSize = 14
+	_attributes.TextXAlignment = Enum.TextXAlignment.Left
+	return React.createElement("textbutton", _attributes)
+end
+return {
+	TextareaLabel = TextareaLabel,
+}

package/out/Textarea/TextareaMessage.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { TextareaMessageProps } from "./types";
+export declare function TextareaMessage(props: TextareaMessageProps): React.JSX.Element;

package/out/Textarea/TextareaMessage.luau

@@ -0,0 +1,31 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local useTextareaContext = TS.import(script, script.Parent, "context").useTextareaContext
+local function TextareaMessage(props)
+	local textareaContext = useTextareaContext()
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[TextareaMessage] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			Name = "TextareaMessage",
+			Text = "Message",
+		}, child)
+	end
+	return React.createElement("textlabel", {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(300, 20),
+		Text = "Message",
+		TextColor3 = if textareaContext.invalid == true then Color3.fromRGB(255, 128, 128) elseif textareaContext.disabled then Color3.fromRGB(132, 139, 154) else Color3.fromRGB(170, 179, 195),
+		TextSize = 13,
+		TextXAlignment = Enum.TextXAlignment.Left,
+	})
+end
+return {
+	TextareaMessage = TextareaMessage,
+}

package/out/Textarea/TextareaRoot.d.ts

@@ -0,0 +1,4 @@
+import { React } from "@lattice-ui/core";
+import type { TextareaProps } from "./types";
+export declare function TextareaRoot(props: TextareaProps): React.JSX.Element;
+export { TextareaRoot as Textarea };

package/out/Textarea/TextareaRoot.luau

@@ -0,0 +1,72 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local useControllableState = _core.useControllableState
+local TextareaContextProvider = TS.import(script, script.Parent, "context").TextareaContextProvider
+local function TextareaRoot(props)
+	local _object = {
+		value = props.value,
+	}
+	local _left = "defaultValue"
+	local _condition = props.defaultValue
+	if _condition == nil then
+		_condition = ""
+	end
+	_object[_left] = _condition
+	_object.onChange = props.onValueChange
+	local _binding = useControllableState(_object)
+	local value = _binding[1]
+	local setValueState = _binding[2]
+	local disabled = props.disabled == true
+	local readOnly = props.readOnly == true
+	local required = props.required == true
+	local invalid = props.invalid == true
+	local _condition_1 = props.autoResize
+	if _condition_1 == nil then
+		_condition_1 = true
+	end
+	local autoResize = _condition_1
+	local _condition_2 = props.minRows
+	if _condition_2 == nil then
+		_condition_2 = 3
+	end
+	local minRows = math.max(1, _condition_2)
+	local maxRows = if props.maxRows ~= nil then math.max(minRows, props.maxRows) else nil
+	local inputRef = React.useRef()
+	local setValue = React.useCallback(function(nextValue)
+		if disabled or readOnly then
+			return nil
+		end
+		setValueState(nextValue)
+	end, { disabled, readOnly, setValueState })
+	local commitValue = React.useCallback(function(nextValue)
+		local _result = props.onValueCommit
+		if _result ~= nil then
+			_result(nextValue)
+		end
+	end, { props.onValueCommit })
+	local contextValue = React.useMemo(function()
+		return {
+			value = value,
+			setValue = setValue,
+			commitValue = commitValue,
+			disabled = disabled,
+			readOnly = readOnly,
+			required = required,
+			invalid = invalid,
+			name = props.name,
+			autoResize = autoResize,
+			minRows = minRows,
+			maxRows = maxRows,
+			inputRef = inputRef,
+		}
+	end, { autoResize, commitValue, disabled, invalid, maxRows, minRows, props.name, readOnly, required, setValue, value })
+	return React.createElement(TextareaContextProvider, {
+		value = contextValue,
+	}, props.children)
+end
+return {
+	TextareaRoot = TextareaRoot,
+	Textarea = TextareaRoot,
+}

package/out/Textarea/autoResize.d.ts

@@ -0,0 +1,7 @@
+export type TextareaAutoResizeOptions = {
+    minRows: number;
+    maxRows?: number;
+    lineHeight: number;
+    verticalPadding?: number;
+};
+export declare function resolveTextareaHeight(text: string, options: TextareaAutoResizeOptions): number;

package/out/Textarea/autoResize.luau

@@ -0,0 +1,23 @@
+-- Compiled with roblox-ts v3.0.0
+local function countLines(text)
+	if #text == 0 then
+		return 1
+	end
+	return #string.split(text, "\n")
+end
+local function resolveTextareaHeight(text, options)
+	local minRows = math.max(1, math.floor(options.minRows))
+	local maxRows = if options.maxRows ~= nil then math.max(minRows, math.floor(options.maxRows)) else nil
+	local lineHeight = math.max(1, options.lineHeight)
+	local _condition = options.verticalPadding
+	if _condition == nil then
+		_condition = 0
+	end
+	local verticalPadding = math.max(0, _condition)
+	local naturalRows = countLines(text)
+	local clampedRows = if maxRows ~= nil then math.clamp(naturalRows, minRows, maxRows) else math.max(minRows, naturalRows)
+	return clampedRows * lineHeight + verticalPadding
+end
+return {
+	resolveTextareaHeight = resolveTextareaHeight,
+}

package/out/Textarea/context.d.ts

@@ -0,0 +1,3 @@
+import type { TextareaContextValue } from "./types";
+declare const TextareaContextProvider: import("@rbxts/react").Provider<TextareaContextValue | undefined>, useTextareaContext: () => TextareaContextValue;
+export { TextareaContextProvider, useTextareaContext };

package/out/Textarea/context.luau

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local createStrictContext = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out).createStrictContext
+local _binding = createStrictContext("Textarea")
+local TextareaContextProvider = _binding[1]
+local useTextareaContext = _binding[2]
+return {
+	TextareaContextProvider = TextareaContextProvider,
+	useTextareaContext = useTextareaContext,
+}

package/out/Textarea/types.d.ts

@@ -0,0 +1,51 @@
+import type React from "@rbxts/react";
+export type TextareaSetValue = (value: string) => void;
+export type TextareaCommitValue = (value: string) => void;
+export type TextareaContextValue = {
+    value: string;
+    setValue: TextareaSetValue;
+    commitValue: TextareaCommitValue;
+    disabled: boolean;
+    readOnly: boolean;
+    required: boolean;
+    invalid: boolean;
+    name?: string;
+    autoResize: boolean;
+    minRows: number;
+    maxRows?: number;
+    inputRef: React.MutableRefObject<TextBox | undefined>;
+};
+export type TextareaProps = {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onValueCommit?: (value: string) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    name?: string;
+    autoResize?: boolean;
+    minRows?: number;
+    maxRows?: number;
+    children?: React.ReactNode;
+};
+export type TextareaInputProps = {
+    asChild?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    lineHeight?: number;
+    children?: React.ReactElement;
+};
+export type TextareaLabelProps = {
+    asChild?: boolean;
+    children?: React.ReactElement;
+};
+export type TextareaDescriptionProps = {
+    asChild?: boolean;
+    children?: React.ReactElement;
+};
+export type TextareaMessageProps = {
+    asChild?: boolean;
+    children?: React.ReactElement;
+};

package/out/Textarea/types.luau

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v3.0.0
+return nil

package/out/index.d.ts

@@ -0,0 +1,14 @@
+import { TextareaDescription } from "./Textarea/TextareaDescription";
+import { TextareaInput } from "./Textarea/TextareaInput";
+import { TextareaLabel } from "./Textarea/TextareaLabel";
+import { TextareaMessage } from "./Textarea/TextareaMessage";
+import { TextareaRoot } from "./Textarea/TextareaRoot";
+export declare const Textarea: {
+    readonly Root: typeof TextareaRoot;
+    readonly Input: typeof TextareaInput;
+    readonly Label: typeof TextareaLabel;
+    readonly Description: typeof TextareaDescription;
+    readonly Message: typeof TextareaMessage;
+};
+export { resolveTextareaHeight } from "./Textarea/autoResize";
+export type { TextareaCommitValue, TextareaContextValue, TextareaDescriptionProps, TextareaInputProps, TextareaLabelProps, TextareaMessageProps, TextareaProps, TextareaSetValue, } from "./Textarea/types";

package/out/init.luau

@@ -0,0 +1,18 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+local TextareaDescription = TS.import(script, script, "Textarea", "TextareaDescription").TextareaDescription
+local TextareaInput = TS.import(script, script, "Textarea", "TextareaInput").TextareaInput
+local TextareaLabel = TS.import(script, script, "Textarea", "TextareaLabel").TextareaLabel
+local TextareaMessage = TS.import(script, script, "Textarea", "TextareaMessage").TextareaMessage
+local TextareaRoot = TS.import(script, script, "Textarea", "TextareaRoot").TextareaRoot
+local Textarea = {
+	Root = TextareaRoot,
+	Input = TextareaInput,
+	Label = TextareaLabel,
+	Description = TextareaDescription,
+	Message = TextareaMessage,
+}
+exports.resolveTextareaHeight = TS.import(script, script, "Textarea", "autoResize").resolveTextareaHeight
+exports.Textarea = Textarea
+return exports

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@lattice-ui/textarea",
+  "version": "0.3.0",
+  "private": false,
+  "main": "out/init.luau",
+  "types": "out/index.d.ts",
+  "dependencies": {
+    "@lattice-ui/core": "0.3.0"
+  },
+  "devDependencies": {
+    "@rbxts/react": "17.3.7-ts.1",
+    "@rbxts/react-roblox": "17.3.7-ts.1"
+  },
+  "peerDependencies": {
+    "@rbxts/react": "^17",
+    "@rbxts/react-roblox": "^17"
+  },
+  "scripts": {
+    "build": "rbxtsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.typecheck.json",
+    "watch": "rbxtsc -p tsconfig.json -w"
+  }
+}

package/src/Textarea/TextareaDescription.tsx

@@ -0,0 +1,32 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useTextareaContext } from "./context";
+import type { TextareaDescriptionProps } from "./types";
+
+export function TextareaDescription(props: TextareaDescriptionProps) {
+  const textareaContext = useTextareaContext();
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[TextareaDescription] `asChild` requires a child element.");
+    }
+
+    return (
+      <Slot Name="TextareaDescription" Text="Description">
+        {child}
+      </Slot>
+    );
+  }
+
+  return (
+    <textlabel
+      BackgroundTransparency={1}
+      BorderSizePixel={0}
+      Size={UDim2.fromOffset(300, 20)}
+      Text="Description"
+      TextColor3={textareaContext.disabled ? Color3.fromRGB(132, 139, 154) : Color3.fromRGB(170, 179, 195)}
+      TextSize={13}
+      TextXAlignment={Enum.TextXAlignment.Left}
+    />
+  );
+}

package/src/Textarea/TextareaInput.tsx

@@ -0,0 +1,131 @@
+import { React, Slot } from "@lattice-ui/core";
+import { resolveTextareaHeight } from "./autoResize";
+import { useTextareaContext } from "./context";
+import type { TextareaInputProps } from "./types";
+
+function toTextBox(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("TextBox")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
+export function TextareaInput(props: TextareaInputProps) {
+  const textareaContext = useTextareaContext();
+  const disabled = textareaContext.disabled || props.disabled === true;
+  const readOnly = textareaContext.readOnly || props.readOnly === true;
+  const lineHeight = props.lineHeight ?? 18;
+
+  const setInputRef = React.useCallback(
+    (instance: Instance | undefined) => {
+      textareaContext.inputRef.current = toTextBox(instance);
+    },
+    [textareaContext.inputRef],
+  );
+
+  const applyAutoResize = React.useCallback(
+    (textBox: TextBox) => {
+      if (!textareaContext.autoResize) {
+        return;
+      }
+
+      const height = resolveTextareaHeight(textBox.Text, {
+        lineHeight,
+        minRows: textareaContext.minRows,
+        maxRows: textareaContext.maxRows,
+        verticalPadding: 14,
+      });
+
+      const currentSize = textBox.Size;
+      if (currentSize.Y.Offset !== height || currentSize.Y.Scale !== 0) {
+        textBox.Size = UDim2.fromOffset(currentSize.X.Offset, height);
+      }
+    },
+    [lineHeight, textareaContext.autoResize, textareaContext.maxRows, textareaContext.minRows],
+  );
+
+  const handleTextChanged = React.useCallback(
+    (textBox: TextBox) => {
+      if (disabled || readOnly) {
+        if (textBox.Text !== textareaContext.value) {
+          textBox.Text = textareaContext.value;
+        }
+
+        applyAutoResize(textBox);
+        return;
+      }
+
+      textareaContext.setValue(textBox.Text);
+      applyAutoResize(textBox);
+    },
+    [applyAutoResize, disabled, readOnly, textareaContext],
+  );
+
+  const handleFocusLost = React.useCallback(
+    (textBox: TextBox) => {
+      if (disabled) {
+        return;
+      }
+
+      textareaContext.commitValue(textBox.Text);
+    },
+    [disabled, textareaContext],
+  );
+
+  React.useEffect(() => {
+    const input = textareaContext.inputRef.current;
+    if (!input) {
+      return;
+    }
+
+    applyAutoResize(input);
+  }, [applyAutoResize, textareaContext.inputRef, textareaContext.value]);
+
+  const sharedProps = {
+    Active: !disabled,
+    ClearTextOnFocus: false,
+    MultiLine: true,
+    Selectable: !disabled,
+    Text: textareaContext.value,
+    TextEditable: !disabled && !readOnly,
+    TextWrapped: true,
+    Change: {
+      Text: handleTextChanged,
+    },
+    Event: {
+      FocusLost: handleFocusLost,
+    },
+    ref: setInputRef,
+  };
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[TextareaInput] `asChild` requires a child element.");
+    }
+
+    return <Slot {...sharedProps}>{child}</Slot>;
+  }
+
+  return (
+    <textbox
+      {...sharedProps}
+      BackgroundColor3={Color3.fromRGB(39, 46, 61)}
+      BorderSizePixel={0}
+      PlaceholderText="Type..."
+      Size={UDim2.fromOffset(240, 68)}
+      TextColor3={disabled ? Color3.fromRGB(137, 145, 162) : Color3.fromRGB(235, 240, 248)}
+      TextSize={15}
+      TextXAlignment={Enum.TextXAlignment.Left}
+      TextYAlignment={Enum.TextYAlignment.Top}
+    >
+      <uipadding
+        PaddingBottom={new UDim(0, 7)}
+        PaddingLeft={new UDim(0, 10)}
+        PaddingRight={new UDim(0, 10)}
+        PaddingTop={new UDim(0, 7)}
+      />
+    </textbox>
+  );
+}

package/src/Textarea/TextareaLabel.tsx

@@ -0,0 +1,47 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useTextareaContext } from "./context";
+import type { TextareaLabelProps } from "./types";
+
+export function TextareaLabel(props: TextareaLabelProps) {
+  const textareaContext = useTextareaContext();
+  const disabled = textareaContext.disabled;
+
+  const handleActivated = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    textareaContext.inputRef.current?.CaptureFocus();
+  }, [disabled, textareaContext.inputRef]);
+
+  const sharedProps = {
+    Active: !disabled,
+    Selectable: !disabled,
+    Text: "Label",
+    Event: {
+      Activated: handleActivated,
+    },
+  };
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[TextareaLabel] `asChild` requires a child element.");
+    }
+
+    return <Slot {...sharedProps}>{child}</Slot>;
+  }
+
+  return (
+    <textbutton
+      {...sharedProps}
+      AutoButtonColor={false}
+      BackgroundTransparency={1}
+      BorderSizePixel={0}
+      Size={UDim2.fromOffset(240, 22)}
+      TextColor3={disabled ? Color3.fromRGB(149, 157, 173) : Color3.fromRGB(225, 231, 241)}
+      TextSize={14}
+      TextXAlignment={Enum.TextXAlignment.Left}
+    />
+  );
+}

package/src/Textarea/TextareaMessage.tsx

@@ -0,0 +1,38 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useTextareaContext } from "./context";
+import type { TextareaMessageProps } from "./types";
+
+export function TextareaMessage(props: TextareaMessageProps) {
+  const textareaContext = useTextareaContext();
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[TextareaMessage] `asChild` requires a child element.");
+    }
+
+    return (
+      <Slot Name="TextareaMessage" Text="Message">
+        {child}
+      </Slot>
+    );
+  }
+
+  return (
+    <textlabel
+      BackgroundTransparency={1}
+      BorderSizePixel={0}
+      Size={UDim2.fromOffset(300, 20)}
+      Text="Message"
+      TextColor3={
+        textareaContext.invalid === true
+          ? Color3.fromRGB(255, 128, 128)
+          : textareaContext.disabled
+            ? Color3.fromRGB(132, 139, 154)
+            : Color3.fromRGB(170, 179, 195)
+      }
+      TextSize={13}
+      TextXAlignment={Enum.TextXAlignment.Left}
+    />
+  );
+}

package/src/Textarea/TextareaRoot.tsx

@@ -0,0 +1,61 @@
+import { React, useControllableState } from "@lattice-ui/core";
+import { TextareaContextProvider } from "./context";
+import type { TextareaProps } from "./types";
+
+export function TextareaRoot(props: TextareaProps) {
+  const [value, setValueState] = useControllableState<string>({
+    value: props.value,
+    defaultValue: props.defaultValue ?? "",
+    onChange: props.onValueChange,
+  });
+
+  const disabled = props.disabled === true;
+  const readOnly = props.readOnly === true;
+  const required = props.required === true;
+  const invalid = props.invalid === true;
+  const autoResize = props.autoResize ?? true;
+  const minRows = math.max(1, props.minRows ?? 3);
+  const maxRows = props.maxRows !== undefined ? math.max(minRows, props.maxRows) : undefined;
+
+  const inputRef = React.useRef<TextBox>();
+
+  const setValue = React.useCallback(
+    (nextValue: string) => {
+      if (disabled || readOnly) {
+        return;
+      }
+
+      setValueState(nextValue);
+    },
+    [disabled, readOnly, setValueState],
+  );
+
+  const commitValue = React.useCallback(
+    (nextValue: string) => {
+      props.onValueCommit?.(nextValue);
+    },
+    [props.onValueCommit],
+  );
+
+  const contextValue = React.useMemo(
+    () => ({
+      value,
+      setValue,
+      commitValue,
+      disabled,
+      readOnly,
+      required,
+      invalid,
+      name: props.name,
+      autoResize,
+      minRows,
+      maxRows,
+      inputRef,
+    }),
+    [autoResize, commitValue, disabled, invalid, maxRows, minRows, props.name, readOnly, required, setValue, value],
+  );
+
+  return <TextareaContextProvider value={contextValue}>{props.children}</TextareaContextProvider>;
+}
+
+export { TextareaRoot as Textarea };

package/src/Textarea/autoResize.ts

@@ -0,0 +1,27 @@
+export type TextareaAutoResizeOptions = {
+  minRows: number;
+  maxRows?: number;
+  lineHeight: number;
+  verticalPadding?: number;
+};
+
+function countLines(text: string) {
+  if (text.size() === 0) {
+    return 1;
+  }
+
+  return text.split("\n").size();
+}
+
+export function resolveTextareaHeight(text: string, options: TextareaAutoResizeOptions) {
+  const minRows = math.max(1, math.floor(options.minRows));
+  const maxRows = options.maxRows !== undefined ? math.max(minRows, math.floor(options.maxRows)) : undefined;
+  const lineHeight = math.max(1, options.lineHeight);
+  const verticalPadding = math.max(0, options.verticalPadding ?? 0);
+
+  const naturalRows = countLines(text);
+  const clampedRows =
+    maxRows !== undefined ? math.clamp(naturalRows, minRows, maxRows) : math.max(minRows, naturalRows);
+
+  return clampedRows * lineHeight + verticalPadding;
+}

package/src/Textarea/context.ts

@@ -0,0 +1,6 @@
+import { createStrictContext } from "@lattice-ui/core";
+import type { TextareaContextValue } from "./types";
+
+const [TextareaContextProvider, useTextareaContext] = createStrictContext<TextareaContextValue>("Textarea");
+
+export { TextareaContextProvider, useTextareaContext };

package/src/Textarea/types.ts

@@ -0,0 +1,58 @@
+import type React from "@rbxts/react";
+
+export type TextareaSetValue = (value: string) => void;
+export type TextareaCommitValue = (value: string) => void;
+
+export type TextareaContextValue = {
+  value: string;
+  setValue: TextareaSetValue;
+  commitValue: TextareaCommitValue;
+  disabled: boolean;
+  readOnly: boolean;
+  required: boolean;
+  invalid: boolean;
+  name?: string;
+  autoResize: boolean;
+  minRows: number;
+  maxRows?: number;
+  inputRef: React.MutableRefObject<TextBox | undefined>;
+};
+
+export type TextareaProps = {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  onValueCommit?: (value: string) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  invalid?: boolean;
+  name?: string;
+  autoResize?: boolean;
+  minRows?: number;
+  maxRows?: number;
+  children?: React.ReactNode;
+};
+
+export type TextareaInputProps = {
+  asChild?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  lineHeight?: number;
+  children?: React.ReactElement;
+};
+
+export type TextareaLabelProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};
+
+export type TextareaDescriptionProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};
+
+export type TextareaMessageProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};

package/src/index.ts

@@ -0,0 +1,25 @@
+import { TextareaDescription } from "./Textarea/TextareaDescription";
+import { TextareaInput } from "./Textarea/TextareaInput";
+import { TextareaLabel } from "./Textarea/TextareaLabel";
+import { TextareaMessage } from "./Textarea/TextareaMessage";
+import { TextareaRoot } from "./Textarea/TextareaRoot";
+
+export const Textarea = {
+  Root: TextareaRoot,
+  Input: TextareaInput,
+  Label: TextareaLabel,
+  Description: TextareaDescription,
+  Message: TextareaMessage,
+} as const;
+
+export { resolveTextareaHeight } from "./Textarea/autoResize";
+export type {
+  TextareaCommitValue,
+  TextareaContextValue,
+  TextareaDescriptionProps,
+  TextareaInputProps,
+  TextareaLabelProps,
+  TextareaMessageProps,
+  TextareaProps,
+  TextareaSetValue,
+} from "./Textarea/types";

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "out",
+    "declaration": true,
+    "typeRoots": [
+      "./node_modules/@rbxts",
+      "../../node_modules/@rbxts",
+      "./node_modules/@lattice-ui",
+      "../../node_modules/@lattice-ui"
+    ],
+    "types": ["types", "compiler-types"]
+  },
+  "include": ["src"]
+}

package/tsconfig.typecheck.json

@@ -0,0 +1,35 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "baseUrl": "..",
+    "rootDir": "..",
+    "paths": {
+      "@lattice-ui/accordion": ["accordion/src/index.ts"],
+      "@lattice-ui/avatar": ["avatar/src/index.ts"],
+      "@lattice-ui/checkbox": ["checkbox/src/index.ts"],
+      "@lattice-ui/combobox": ["combobox/src/index.ts"],
+      "@lattice-ui/core": ["core/src/index.ts"],
+      "@lattice-ui/dialog": ["dialog/src/index.ts"],
+      "@lattice-ui/focus": ["focus/src/index.ts"],
+      "@lattice-ui/layer": ["layer/src/index.ts"],
+      "@lattice-ui/menu": ["menu/src/index.ts"],
+      "@lattice-ui/popover": ["popover/src/index.ts"],
+      "@lattice-ui/popper": ["popper/src/index.ts"],
+      "@lattice-ui/progress": ["progress/src/index.ts"],
+      "@lattice-ui/radio-group": ["radio-group/src/index.ts"],
+      "@lattice-ui/scroll-area": ["scroll-area/src/index.ts"],
+      "@lattice-ui/select": ["select/src/index.ts"],
+      "@lattice-ui/slider": ["slider/src/index.ts"],
+      "@lattice-ui/style": ["style/src/index.ts"],
+      "@lattice-ui/switch": ["switch/src/index.ts"],
+      "@lattice-ui/system": ["system/src/index.ts"],
+      "@lattice-ui/tabs": ["tabs/src/index.ts"],
+      "@lattice-ui/text-field": ["text-field/src/index.ts"],
+      "@lattice-ui/textarea": ["textarea/src/index.ts"],
+      "@lattice-ui/toast": ["toast/src/index.ts"],
+      "@lattice-ui/toggle-group": ["toggle-group/src/index.ts"],
+      "@lattice-ui/tooltip": ["tooltip/src/index.ts"]
+    }
+  }
+}