Refactor and move Input component

src/components/Input/index.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import styles from "./style.module.css";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  customSize?: "small" | "medium" | "large";
+  error?: string;
+  helperText?: string;
+  label?: string;
+}
+
+export const Input: React.FC<InputProps> = ({
+  label,
+  error,
+  helperText,
+  customSize = "medium",
+  style,
+  id,
+  ...props
+}) => {
+  const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;
+
+  return (
+    <div className={styles.container} data-error={!!error} data-size={customSize}>
+      {label && <label htmlFor={inputId}>{label}</label>}
+      <input
+        {...props}
+        aria-describedby={helperText ? inputId + "-helper-text" : undefined}
+        aria-errormessage={error ? inputId + "-error-message" : undefined}
+        aria-invalid={!!error}
+        id={inputId}
+        style={style}
+      />
+      {helperText && (
+        <div className={styles.helperText} id={inputId + "-helper-text"}>
+          {helperText}
+        </div>
+      )}
+      {error && (
+        <div aria-live="polite" className={styles.helperText} id={inputId + "-error-message"}>
+          {error}
+        </div>
+      )}
+    </div>
+  );
+};

src/components/Input/style.module.css

@@ -0,0 +1,113 @@
+.container {
+  /* input container layout */
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--clover-ai-fontSizes-1) / var(--golden-ratio));
+
+  /* shared styles */
+  --accent-color: var(--clover-ai-colors-accentMuted);
+
+  input {
+    width: 100%;
+    outline: none;
+    transition:
+      border-color 0.2s ease-in-out,
+      box-shadow 0.2s ease-in-out;
+    font-size: var(--clover-ai-fontSizes-3);
+
+    --input-border-radius: var(--clover-ai-sizes-2);
+    border-radius: var(--input-border-radius);
+
+    --input-border-width: 1px;
+    border-width: var(--input-border-width);
+
+    --input-border-style: solid;
+    border-style: var(--input-border-style);
+
+    --input-border-color: var(--accent-color);
+    border-color: var(--input-border-color);
+
+    --input-padding: var(--clover-ai-sizes-2);
+    padding: var(--input-padding);
+
+    --input-background-color: initial;
+    background-color: var(--input-background-color);
+
+    &:focus {
+      --input-box-shadow-color: color-mix(in srgb, var(--input-border-color) 10%, transparent);
+      --input-box-shadow: 0 0 0 var(--clover-ai-sizes-1) var(--input-box-shadow-color);
+      box-shadow: var(--input-box-shadow);
+    }
+
+    &:user-invalid {
+      --input-border-color: var(--clover-ai-colors-error);
+    }
+  }
+
+  label,
+  .helperText {
+    font-size: var(--clover-ai-fontSizes-2);
+  }
+
+  * {
+    font-family: inherit;
+  }
+}
+
+/* Error state */
+.container[data-error="true"] {
+  --accent-color: var(--clover-ai-colors-error);
+  --input-border-color: var(--clover-ai-colors-error);
+
+  label {
+    color: var(--accent-color);
+  }
+
+  .helperText {
+    color: var(--accent-color);
+  }
+}
+
+.container:has(input:required) {
+  label::after {
+    content: " *";
+    color: var(--clover-ai-colors-error);
+  }
+}
+
+/* Size styles */
+.container[data-size="small"] {
+  /* decrease the font sizes by 1 */
+  input {
+    font-size: var(--clover-ai-fontSizes-2);
+  }
+
+  label,
+  .helperText {
+    font-size: var(--clover-ai-fontSizes-1);
+  }
+}
+
+.container[data-size="large"] {
+  /* increase the font sizes by 2 */
+  input {
+    --input-padding: var(--clover-ai-sizes-3);
+    font-size: var(--clover-ai-fontSizes-5);
+  }
+
+  label,
+  .helperText {
+    font-size: var(--clover-ai-fontSizes-3);
+  }
+}
+
+/* Input prop styles */
+input:disabled {
+  cursor: not-allowed;
+}
+
+input:read-only:focus {
+  --input-box-shadow-color: none;
+  --input-box-shadow: none;
+}

src/components/index.ts

@@ -9,6 +9,9 @@ export { Message } from "./Messages/Message";
 export { Heading } from "./Heading";
 export type { HeadingProps } from "./Heading";
 
+export { Input } from "./Input";
+export type { InputProps } from "./Input";
+
 export { MessagesContainer } from "./Messages";
 export type { MessagesContainerProps } from "./Messages";
 

src/provider/index.tsx

@@ -1,13 +1,12 @@
 import { createAnthropic, type AnthropicProvider } from "@ai-sdk/anthropic";
 import { createGoogleGenerativeAI, type google } from "@ai-sdk/google";
 import { createOpenAI, type OpenAIProvider } from "@ai-sdk/openai";
-import { Button, Heading } from "@components";
+import { Button, Heading, Input } from "@components";
 import { Tool } from "@langchain/core/tools";
 import type { AssistantMessage, Message } from "@types";
 import { streamText, tool } from "ai";
 import React from "react";
 import { BaseProvider } from "../plugin/base_provider";
-import { Input } from "./components/Input";
 import { ModelSelection } from "./components/ModelSelection";
 import { ProviderSelection } from "./components/ProviderSelection";
 import styles from "./style.module.css";
@@ -319,7 +318,6 @@ export class UserTokenProvider extends BaseProvider {
         <Heading level="h3">Enter API Key</Heading>
         <Input
           autoFocus={true}
-          customSize="small"
           label="Please provide an API key"
           placeholder={`Enter your ${modelProvider.charAt(0).toUpperCase() + modelProvider.slice(1)} API Key`}
           type="password"