@lattice-ui/text-field 0.4.3 → 0.5.0-next.1

package/default.project.json

@@ -0,0 +1,9 @@
+{
+  "name": "text-field",
+  "tree": {
+    "$path": "out",
+    "out": {
+      "$path": "out"
+    }
+  }
+}

package/out/TextField/TextFieldInput.luau

@@ -3,6 +3,9 @@ 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 _motion = TS.import(script, TS.getModule(script, "@lattice-ui", "motion").out)
+local createFieldResponseRecipe = _motion.createFieldResponseRecipe
+local useResponseMotion = _motion.useResponseMotion
 local useTextFieldContext = TS.import(script, script.Parent, "context").useTextFieldContext
 local function toTextBox(instance)
 	if not instance or not instance:IsA("TextBox") then
@@ -14,9 +17,20 @@ local function TextFieldInput(props)
 	local textFieldContext = useTextFieldContext()
 	local disabled = textFieldContext.disabled or props.disabled == true
 	local readOnly = textFieldContext.readOnly or props.readOnly == true
+	local focused, setFocused = React.useState(false)
+	local active = focused and not disabled and not readOnly
+	local localRef = useResponseMotion(active, {
+		active = {
+			BackgroundColor3 = Color3.fromRGB(35, 41, 54),
+		},
+		inactive = {
+			BackgroundColor3 = Color3.fromRGB(39, 46, 61),
+		},
+	}, createFieldResponseRecipe())
 	local setInputRef = React.useCallback(function(instance)
+		localRef.current = toTextBox(instance)
 		textFieldContext.inputRef.current = toTextBox(instance)
-	end, { textFieldContext.inputRef })
+	end, { textFieldContext.inputRef, localRef })
 	local handleTextChanged = React.useCallback(function(textBox)
 		if disabled or readOnly then
 			if textBox.Text ~= textFieldContext.value then
@@ -26,7 +40,11 @@ local function TextFieldInput(props)
 		end
 		textFieldContext.setValue(textBox.Text)
 	end, { disabled, readOnly, textFieldContext })
+	local handleFocused = React.useCallback(function()
+		setFocused(true)
+	end, {})
 	local handleFocusLost = React.useCallback(function(textBox)
+		setFocused(false)
 		if disabled then
 			return nil
 		end
@@ -42,6 +60,7 @@ local function TextFieldInput(props)
 			Text = handleTextChanged,
 		},
 		Event = {
+			Focused = handleFocused,
 			FocusLost = handleFocusLost,
 		},
 		ref = setInputRef,
@@ -57,7 +76,7 @@ local function TextFieldInput(props)
 	end
 	local _attributes = table.clone(sharedProps)
 	setmetatable(_attributes, nil)
-	_attributes.BackgroundColor3 = Color3.fromRGB(39, 46, 61)
+	_attributes.BackgroundColor3 = if focused and not disabled and not readOnly then Color3.fromRGB(47, 53, 68) else Color3.fromRGB(39, 46, 61)
 	_attributes.BorderSizePixel = 0
 	_attributes.PlaceholderText = "Type..."
 	_attributes.Size = UDim2.fromOffset(240, 36)

package/package.json

@@ -1,11 +1,23 @@
 {
   "name": "@lattice-ui/text-field",
-  "version": "0.4.3",
+  "version": "0.5.0-next.1",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "default.project.json",
+    "out",
+    "src",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/astra-void/lattice-ui.git"
+  },
   "dependencies": {
-    "@lattice-ui/core": "0.4.3"
+    "@lattice-ui/core": "0.5.0-next.1",
+    "@lattice-ui/motion": "0.5.0-next.1"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",
@@ -17,6 +29,8 @@
   },
   "scripts": {
     "build": "rbxtsc -p tsconfig.json",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "typecheck": "tsc -p tsconfig.typecheck.json",
     "watch": "rbxtsc -p tsconfig.json -w"
   }

package/src/TextField/TextFieldInput.tsx

@@ -1,4 +1,5 @@
 import { React, Slot } from "@lattice-ui/core";
+import { createFieldResponseRecipe, useResponseMotion } from "@lattice-ui/motion";
 import { useTextFieldContext } from "./context";
 import type { TextFieldInputProps } from "./types";
 
@@ -14,12 +15,24 @@ export function TextFieldInput(props: TextFieldInputProps) {
   const textFieldContext = useTextFieldContext();
   const disabled = textFieldContext.disabled || props.disabled === true;
   const readOnly = textFieldContext.readOnly || props.readOnly === true;
+  const [focused, setFocused] = React.useState(false);
+
+  const active = focused && !disabled && !readOnly;
+  const localRef = useResponseMotion<TextBox>(
+    active,
+    {
+      active: { BackgroundColor3: Color3.fromRGB(35, 41, 54) },
+      inactive: { BackgroundColor3: Color3.fromRGB(39, 46, 61) },
+    },
+    createFieldResponseRecipe(),
+  );
 
   const setInputRef = React.useCallback(
     (instance: Instance | undefined) => {
+      localRef.current = toTextBox(instance);
       textFieldContext.inputRef.current = toTextBox(instance);
     },
-    [textFieldContext.inputRef],
+    [textFieldContext.inputRef, localRef],
   );
 
   const handleTextChanged = React.useCallback(
@@ -37,8 +50,13 @@ export function TextFieldInput(props: TextFieldInputProps) {
     [disabled, readOnly, textFieldContext],
   );
 
+  const handleFocused = React.useCallback(() => {
+    setFocused(true);
+  }, []);
+
   const handleFocusLost = React.useCallback(
     (textBox: TextBox) => {
+      setFocused(false);
       if (disabled) {
         return;
       }
@@ -58,6 +76,7 @@ export function TextFieldInput(props: TextFieldInputProps) {
       Text: handleTextChanged,
     },
     Event: {
+      Focused: handleFocused,
       FocusLost: handleFocusLost,
     },
     ref: setInputRef,
@@ -75,7 +94,7 @@ export function TextFieldInput(props: TextFieldInputProps) {
   return (
     <textbox
       {...sharedProps}
-      BackgroundColor3={Color3.fromRGB(39, 46, 61)}
+      BackgroundColor3={focused && !disabled && !readOnly ? Color3.fromRGB(47, 53, 68) : Color3.fromRGB(39, 46, 61)}
       BorderSizePixel={0}
       PlaceholderText="Type..."
       Size={UDim2.fromOffset(240, 36)}

package/.turbo/turbo-build.log

@@ -1,4 +0,0 @@
-
-> @lattice-ui/text-field@0.4.3 build C:\Users\retur\OneDrive\Desktop\Workspace\rojo\lattice-ui\packages\text-field
-> rbxtsc -p tsconfig.json
-

package/.turbo/turbo-typecheck.log

@@ -1,4 +0,0 @@
-
-> @lattice-ui/text-field@0.4.3 typecheck C:\Users\retur\OneDrive\Desktop\Workspace\rojo\lattice-ui\packages\text-field
-> tsc -p tsconfig.typecheck.json
-

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "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

@@ -1,35 +0,0 @@
-{
-  "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"]
-    }
-  }
-}