feat: form fields

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

@@ -51,6 +51,7 @@ function Content({ path }: Props) {
               <Fragment key={index}>
                 {index > 0 && (
                   <TextField
+                    variant="form"
                     className={styles.slug}
                     placeholder={`[${slug}]`}
                     align="center"

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

@@ -5,15 +5,30 @@
 
   gap: var(--space-3);
 
-  border-radius: var(--max-size);
-
-  background-color: var(--gray-1);
-  box-shadow: var(--shadow-interactive), var(--shadow-cavity);
   cursor: text;
 
   font: inherit;
   color: var(--gray-11);
 
+  &[data-variant="bubble"] {
+    border-radius: var(--max-size);
+
+    background-color: var(--gray-1);
+    box-shadow: var(--shadow-interactive), var(--shadow-cavity);
+
+    input {
+      padding: var(--space-3) var(--space-4);
+    }
+  }
+
+  &[data-variant="form"] {
+    border-bottom: var(--space-1) solid var(--gray-6);
+
+    input {
+      padding: var(--space-2);
+    }
+  }
+
   &[data-has-icon="true"] {
     padding-left: var(--space-3);
 
@@ -34,7 +49,7 @@
     color: var(--gray-9);
 
     input::placeholder {
-      color: var(--gray-9);
+      color: var(--gray-6);
     }
   }
 
@@ -52,12 +67,11 @@
     cursor: inherit;
 
     font: inherit;
-    padding: var(--space-3) var(--space-4);
 
     color: var(--gray-12);
 
     &::placeholder {
-      color: var(--gray-11);
+      color: var(--gray-9);
     }
 
     &:focus {

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

@@ -14,6 +14,7 @@ export interface TextFieldProps extends ComponentProps<"input"> {
   children?: ReactNode;
   align?: "left" | "center" | "right";
   autoWidth?: boolean;
+  variant?: "bubble" | "form";
 }
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
@@ -27,6 +28,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       disabled,
       value,
       onChange,
+      variant = "bubble",
       ...props
     },
     ref,
@@ -52,6 +54,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         className={classNames("text-field", className)}
         data-has-icon={children !== undefined}
         data-disabled={disabled}
+        data-variant={variant}
       >
         {children}
         <input