feat: finalize tool cards

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

@@ -1,6 +1,7 @@
 .text-field {
   display: flex;
   align-items: center;
+  box-sizing: border-box;
 
   gap: var(--space-3);
   margin: 0 var(--space-4);

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

@@ -1,4 +1,10 @@
-import type { ComponentProps, ReactNode } from "react";
+import {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  type ComponentProps,
+  type ReactNode,
+} from "react";
 import { classNames } from "../../core/ui/classNames";
 import "./index.css";
 
@@ -6,14 +12,20 @@ export interface TextFieldProps extends ComponentProps<"input"> {
   children?: ReactNode;
 }
 
-export function TextField({ children, className, ...props }: TextFieldProps) {
-  return (
-    <div
-      className={classNames("text-field", className)}
-      data-has-icon={children !== undefined}
-    >
-      {children}
-      <input {...props} />
-    </div>
-  );
-}
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  ({ children, className, ...props }, ref) => {
+    const input = useRef<HTMLInputElement>(null);
+
+    useImperativeHandle(ref, () => input.current!, []);
+
+    return (
+      <div
+        className={classNames("text-field", className)}
+        data-has-icon={children !== undefined}
+      >
+        {children}
+        <input ref={input} {...props} />
+      </div>
+    );
+  }
+);