feat: in-heading testing

packages/website-ue/src/components/TextField/index.css

@@ -53,8 +53,7 @@
 
     font-size: inherit;
     font-weight: medium;
-    padding: var(--space-3) 0;
-    padding-left: var(--space-4);
+    padding: var(--space-3) var(--space-4);
 
     color: var(--gray-12);
 
@@ -65,5 +64,16 @@
     &:focus {
       outline: none;
     }
+
+    &[data-align="center"] {
+      text-align: center;
+    }
+    &[data-align="right"] {
+      text-align: right;
+    }
+
+    &[data-monospace="true"] {
+      font-family: var(--font-family-mono);
+    }
   }
 }

packages/website-ue/src/components/TextField/index.tsx

@@ -1,7 +1,9 @@
 import {
   forwardRef,
+  useCallback,
   useImperativeHandle,
   useRef,
+  type ChangeEvent,
   type ComponentProps,
   type ReactNode,
 } from "react";
@@ -10,12 +12,40 @@ import "./index.css";
 
 export interface TextFieldProps extends ComponentProps<"input"> {
   children?: ReactNode;
+  align?: "left" | "center" | "right";
+  monospace?: boolean;
+  autoWidth?: boolean;
 }
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
-  ({ children, className, placeholder, disabled, ...props }, ref) => {
+  (
+    {
+      children,
+      className,
+      monospace,
+      autoWidth,
+      placeholder,
+      align,
+      disabled,
+      value,
+      onChange,
+      ...props
+    },
+    ref,
+  ) => {
     const input = useRef<HTMLInputElement>(null);
 
+    const handleChange = useCallback(
+      (event: ChangeEvent<HTMLInputElement>) => {
+        if (autoWidth && input.current) {
+          input.current.style.width = `${event.target.value.length || event.target.placeholder.length}ch`;
+        }
+
+        onChange?.(event);
+      },
+      [onChange],
+    );
+
     useImperativeHandle(ref, () => input.current!, []);
 
     return (
@@ -26,8 +56,19 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         data-disabled={disabled}
       >
         {children}
-        <input disabled={disabled} ref={input} placeholder={placeholder} />
+        <input
+          data-align={align === "left" ? undefined : align}
+          data-monospace={monospace}
+          disabled={disabled}
+          ref={input}
+          onChange={handleChange}
+          placeholder={placeholder}
+          value={value}
+          style={{
+            width: `${value?.toString().length || placeholder?.length || 0}ch`,
+          }}
+        />
       </div>
     );
-  }
+  },
 );