@lattice-ui/text-field 0.3.0

package/README.md

@@ -0,0 +1,18 @@
+# @lattice-ui/text-field
+
+Headless text input primitives for Roblox UI with controlled/uncontrolled state and commit events.
+
+## Exports
+
+- `TextField`
+- `TextField.Root`
+- `TextField.Input`
+- `TextField.Label`
+- `TextField.Description`
+- `TextField.Message`
+
+## Notes
+
+- `onValueChange` runs when input text changes.
+- `onValueCommit` runs on `FocusLost`/enter-style commit moments.
+- `disabled` and `readOnly` are enforced at the root context and reflected by `TextFieldInput`.

package/out/TextField/TextFieldDescription.d.ts

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

package/out/TextField/TextFieldDescription.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 useTextFieldContext = TS.import(script, script.Parent, "context").useTextFieldContext
+local function TextFieldDescription(props)
+	local textFieldContext = useTextFieldContext()
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[TextFieldDescription] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			Name = "TextFieldDescription",
+			Text = "Description",
+		}, child)
+	end
+	return React.createElement("textlabel", {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(300, 20),
+		Text = "Description",
+		TextColor3 = if textFieldContext.disabled then Color3.fromRGB(132, 139, 154) else Color3.fromRGB(170, 179, 195),
+		TextSize = 13,
+		TextXAlignment = Enum.TextXAlignment.Left,
+	})
+end
+return {
+	TextFieldDescription = TextFieldDescription,
+}

package/out/TextField/TextFieldInput.d.ts

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

package/out/TextField/TextFieldInput.luau

@@ -0,0 +1,74 @@
+-- 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 useTextFieldContext = TS.import(script, script.Parent, "context").useTextFieldContext
+local function toTextBox(instance)
+	if not instance or not instance:IsA("TextBox") then
+		return nil
+	end
+	return instance
+end
+local function TextFieldInput(props)
+	local textFieldContext = useTextFieldContext()
+	local disabled = textFieldContext.disabled or props.disabled == true
+	local readOnly = textFieldContext.readOnly or props.readOnly == true
+	local setInputRef = React.useCallback(function(instance)
+		textFieldContext.inputRef.current = toTextBox(instance)
+	end, { textFieldContext.inputRef })
+	local handleTextChanged = React.useCallback(function(textBox)
+		if disabled or readOnly then
+			if textBox.Text ~= textFieldContext.value then
+				textBox.Text = textFieldContext.value
+			end
+			return nil
+		end
+		textFieldContext.setValue(textBox.Text)
+	end, { disabled, readOnly, textFieldContext })
+	local handleFocusLost = React.useCallback(function(textBox)
+		if disabled then
+			return nil
+		end
+		textFieldContext.commitValue(textBox.Text)
+	end, { disabled, textFieldContext })
+	local sharedProps = {
+		Active = not disabled,
+		ClearTextOnFocus = false,
+		Selectable = not disabled,
+		Text = textFieldContext.value,
+		TextEditable = not disabled and not readOnly,
+		Change = {
+			Text = handleTextChanged,
+		},
+		Event = {
+			FocusLost = handleFocusLost,
+		},
+		ref = setInputRef,
+	}
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[TextFieldInput] `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, 36)
+	_attributes.TextColor3 = if disabled then Color3.fromRGB(137, 145, 162) else Color3.fromRGB(235, 240, 248)
+	_attributes.TextSize = 15
+	_attributes.TextXAlignment = Enum.TextXAlignment.Left
+	return React.createElement("textbox", _attributes, React.createElement("uipadding", {
+		PaddingLeft = UDim.new(0, 10),
+		PaddingRight = UDim.new(0, 10),
+	}))
+end
+return {
+	TextFieldInput = TextFieldInput,
+}

package/out/TextField/TextFieldLabel.d.ts

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

package/out/TextField/TextFieldLabel.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 useTextFieldContext = TS.import(script, script.Parent, "context").useTextFieldContext
+local function TextFieldLabel(props)
+	local textFieldContext = useTextFieldContext()
+	local disabled = textFieldContext.disabled
+	local handleActivated = React.useCallback(function()
+		if disabled then
+			return nil
+		end
+		local _result = textFieldContext.inputRef.current
+		if _result ~= nil then
+			_result:CaptureFocus()
+		end
+	end, { disabled, textFieldContext.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("[TextFieldLabel] `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 {
+	TextFieldLabel = TextFieldLabel,
+}

package/out/TextField/TextFieldMessage.d.ts

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

package/out/TextField/TextFieldMessage.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 useTextFieldContext = TS.import(script, script.Parent, "context").useTextFieldContext
+local function TextFieldMessage(props)
+	local textFieldContext = useTextFieldContext()
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[TextFieldMessage] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			Name = "TextFieldMessage",
+			Text = "Message",
+		}, child)
+	end
+	return React.createElement("textlabel", {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(300, 20),
+		Text = "Message",
+		TextColor3 = if textFieldContext.invalid == true then Color3.fromRGB(255, 128, 128) elseif textFieldContext.disabled then Color3.fromRGB(132, 139, 154) else Color3.fromRGB(170, 179, 195),
+		TextSize = 13,
+		TextXAlignment = Enum.TextXAlignment.Left,
+	})
+end
+return {
+	TextFieldMessage = TextFieldMessage,
+}

package/out/TextField/TextFieldRoot.d.ts

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

package/out/TextField/TextFieldRoot.luau

@@ -0,0 +1,57 @@
+-- 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 TextFieldContextProvider = TS.import(script, script.Parent, "context").TextFieldContextProvider
+local function TextFieldRoot(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 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,
+			inputRef = inputRef,
+		}
+	end, { commitValue, disabled, invalid, props.name, readOnly, required, setValue, value })
+	return React.createElement(TextFieldContextProvider, {
+		value = contextValue,
+	}, props.children)
+end
+return {
+	TextFieldRoot = TextFieldRoot,
+}

package/out/TextField/context.d.ts

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

package/out/TextField/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("TextField")
+local TextFieldContextProvider = _binding[1]
+local useTextFieldContext = _binding[2]
+return {
+	TextFieldContextProvider = TextFieldContextProvider,
+	useTextFieldContext = useTextFieldContext,
+}

package/out/TextField/types.d.ts

@@ -0,0 +1,44 @@
+import type React from "@rbxts/react";
+export type TextFieldSetValue = (value: string) => void;
+export type TextFieldCommitValue = (value: string) => void;
+export type TextFieldContextValue = {
+    value: string;
+    setValue: TextFieldSetValue;
+    commitValue: TextFieldCommitValue;
+    disabled: boolean;
+    readOnly: boolean;
+    required: boolean;
+    invalid: boolean;
+    name?: string;
+    inputRef: React.MutableRefObject<TextBox | undefined>;
+};
+export type TextFieldProps = {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onValueCommit?: (value: string) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    name?: string;
+    children?: React.ReactNode;
+};
+export type TextFieldInputProps = {
+    asChild?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    children?: React.ReactElement;
+};
+export type TextFieldLabelProps = {
+    asChild?: boolean;
+    children?: React.ReactElement;
+};
+export type TextFieldDescriptionProps = {
+    asChild?: boolean;
+    children?: React.ReactElement;
+};
+export type TextFieldMessageProps = {
+    asChild?: boolean;
+    children?: React.ReactElement;
+};

package/out/TextField/types.luau

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

package/out/index.d.ts

@@ -0,0 +1,13 @@
+import { TextFieldDescription } from "./TextField/TextFieldDescription";
+import { TextFieldInput } from "./TextField/TextFieldInput";
+import { TextFieldLabel } from "./TextField/TextFieldLabel";
+import { TextFieldMessage } from "./TextField/TextFieldMessage";
+import { TextFieldRoot } from "./TextField/TextFieldRoot";
+export declare const TextField: {
+    readonly Root: typeof TextFieldRoot;
+    readonly Input: typeof TextFieldInput;
+    readonly Label: typeof TextFieldLabel;
+    readonly Description: typeof TextFieldDescription;
+    readonly Message: typeof TextFieldMessage;
+};
+export type { TextFieldCommitValue, TextFieldContextValue, TextFieldDescriptionProps, TextFieldInputProps, TextFieldLabelProps, TextFieldMessageProps, TextFieldProps, TextFieldSetValue, } from "./TextField/types";

package/out/init.luau

@@ -0,0 +1,17 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local TextFieldDescription = TS.import(script, script, "TextField", "TextFieldDescription").TextFieldDescription
+local TextFieldInput = TS.import(script, script, "TextField", "TextFieldInput").TextFieldInput
+local TextFieldLabel = TS.import(script, script, "TextField", "TextFieldLabel").TextFieldLabel
+local TextFieldMessage = TS.import(script, script, "TextField", "TextFieldMessage").TextFieldMessage
+local TextFieldRoot = TS.import(script, script, "TextField", "TextFieldRoot").TextFieldRoot
+local TextField = {
+	Root = TextFieldRoot,
+	Input = TextFieldInput,
+	Label = TextFieldLabel,
+	Description = TextFieldDescription,
+	Message = TextFieldMessage,
+}
+return {
+	TextField = TextField,
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@lattice-ui/text-field",
+  "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/TextField/TextFieldDescription.tsx

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

package/src/TextField/TextFieldInput.tsx

@@ -0,0 +1,89 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useTextFieldContext } from "./context";
+import type { TextFieldInputProps } from "./types";
+
+function toTextBox(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("TextBox")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
+export function TextFieldInput(props: TextFieldInputProps) {
+  const textFieldContext = useTextFieldContext();
+  const disabled = textFieldContext.disabled || props.disabled === true;
+  const readOnly = textFieldContext.readOnly || props.readOnly === true;
+
+  const setInputRef = React.useCallback(
+    (instance: Instance | undefined) => {
+      textFieldContext.inputRef.current = toTextBox(instance);
+    },
+    [textFieldContext.inputRef],
+  );
+
+  const handleTextChanged = React.useCallback(
+    (textBox: TextBox) => {
+      if (disabled || readOnly) {
+        if (textBox.Text !== textFieldContext.value) {
+          textBox.Text = textFieldContext.value;
+        }
+
+        return;
+      }
+
+      textFieldContext.setValue(textBox.Text);
+    },
+    [disabled, readOnly, textFieldContext],
+  );
+
+  const handleFocusLost = React.useCallback(
+    (textBox: TextBox) => {
+      if (disabled) {
+        return;
+      }
+
+      textFieldContext.commitValue(textBox.Text);
+    },
+    [disabled, textFieldContext],
+  );
+
+  const sharedProps = {
+    Active: !disabled,
+    ClearTextOnFocus: false,
+    Selectable: !disabled,
+    Text: textFieldContext.value,
+    TextEditable: !disabled && !readOnly,
+    Change: {
+      Text: handleTextChanged,
+    },
+    Event: {
+      FocusLost: handleFocusLost,
+    },
+    ref: setInputRef,
+  };
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[TextFieldInput] `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, 36)}
+      TextColor3={disabled ? Color3.fromRGB(137, 145, 162) : Color3.fromRGB(235, 240, 248)}
+      TextSize={15}
+      TextXAlignment={Enum.TextXAlignment.Left}
+    >
+      <uipadding PaddingLeft={new UDim(0, 10)} PaddingRight={new UDim(0, 10)} />
+    </textbox>
+  );
+}

package/src/TextField/TextFieldLabel.tsx

@@ -0,0 +1,47 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useTextFieldContext } from "./context";
+import type { TextFieldLabelProps } from "./types";
+
+export function TextFieldLabel(props: TextFieldLabelProps) {
+  const textFieldContext = useTextFieldContext();
+  const disabled = textFieldContext.disabled;
+
+  const handleActivated = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    textFieldContext.inputRef.current?.CaptureFocus();
+  }, [disabled, textFieldContext.inputRef]);
+
+  const sharedProps = {
+    Active: !disabled,
+    Selectable: !disabled,
+    Text: "Label",
+    Event: {
+      Activated: handleActivated,
+    },
+  };
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[TextFieldLabel] `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/TextField/TextFieldMessage.tsx

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

package/src/TextField/TextFieldRoot.tsx

@@ -0,0 +1,53 @@
+import { React, useControllableState } from "@lattice-ui/core";
+import { TextFieldContextProvider } from "./context";
+import type { TextFieldProps } from "./types";
+
+export function TextFieldRoot(props: TextFieldProps) {
+  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 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,
+      inputRef,
+    }),
+    [commitValue, disabled, invalid, props.name, readOnly, required, setValue, value],
+  );
+
+  return <TextFieldContextProvider value={contextValue}>{props.children}</TextFieldContextProvider>;
+}

package/src/TextField/context.ts

@@ -0,0 +1,6 @@
+import { createStrictContext } from "@lattice-ui/core";
+import type { TextFieldContextValue } from "./types";
+
+const [TextFieldContextProvider, useTextFieldContext] = createStrictContext<TextFieldContextValue>("TextField");
+
+export { TextFieldContextProvider, useTextFieldContext };

package/src/TextField/types.ts

@@ -0,0 +1,51 @@
+import type React from "@rbxts/react";
+
+export type TextFieldSetValue = (value: string) => void;
+export type TextFieldCommitValue = (value: string) => void;
+
+export type TextFieldContextValue = {
+  value: string;
+  setValue: TextFieldSetValue;
+  commitValue: TextFieldCommitValue;
+  disabled: boolean;
+  readOnly: boolean;
+  required: boolean;
+  invalid: boolean;
+  name?: string;
+  inputRef: React.MutableRefObject<TextBox | undefined>;
+};
+
+export type TextFieldProps = {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  onValueCommit?: (value: string) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  invalid?: boolean;
+  name?: string;
+  children?: React.ReactNode;
+};
+
+export type TextFieldInputProps = {
+  asChild?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  children?: React.ReactElement;
+};
+
+export type TextFieldLabelProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};
+
+export type TextFieldDescriptionProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};
+
+export type TextFieldMessageProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};

package/src/index.ts

@@ -0,0 +1,24 @@
+import { TextFieldDescription } from "./TextField/TextFieldDescription";
+import { TextFieldInput } from "./TextField/TextFieldInput";
+import { TextFieldLabel } from "./TextField/TextFieldLabel";
+import { TextFieldMessage } from "./TextField/TextFieldMessage";
+import { TextFieldRoot } from "./TextField/TextFieldRoot";
+
+export const TextField = {
+  Root: TextFieldRoot,
+  Input: TextFieldInput,
+  Label: TextFieldLabel,
+  Description: TextFieldDescription,
+  Message: TextFieldMessage,
+} as const;
+
+export type {
+  TextFieldCommitValue,
+  TextFieldContextValue,
+  TextFieldDescriptionProps,
+  TextFieldInputProps,
+  TextFieldLabelProps,
+  TextFieldMessageProps,
+  TextFieldProps,
+  TextFieldSetValue,
+} from "./TextField/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"]
+    }
+  }
+}