feat: add ghost variant to input

Signed-off-by: tylerslaton <[email protected]>

ui/admin/app/components/agent/AgentForm.tsx

@@ -60,17 +60,19 @@ export function AgentForm({ agent, onSubmit, onChange }: AgentFormProps) {
         <Form {...form}>
             <form onSubmit={handleSubmit} className="space-y-4">
                 <ControlledInput
+                    variant="ghost"
                     autoComplete="off"
                     control={form.control}
                     name="name"
-                    className="text-3xl shadow-none cursor-pointer hover:border-primary px-0 mb-0 font-bold outline-none border-transparent focus:border-primary"
+                    className="text-3xl"
                 />
                 <ControlledInput
+                    variant="ghost"
                     control={form.control}
                     autoComplete="off"
                     name="description"
                     placeholder="Add a description..."
-                    className="text-xl text-muted-foreground font-semibold shadow-none cursor-pointer hover:border-primary px-0 outline-none border-transparent focus:border-primary"
+                    className="text-xl text-muted-foreground"
                 />
             </form>
         </Form>

ui/admin/app/components/agent/PastThreads.tsx

@@ -21,7 +21,7 @@ import {
     PopoverTrigger,
 } from "~/components/ui/popover";
 
-import { TypographyH4, TypographyP } from "../Typography";
+import { TypographyP } from "../Typography";
 
 interface PastThreadsProps {
     agentId: string;

ui/admin/app/components/ui/input.tsx

@@ -1,18 +1,33 @@
+import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
 import { cn } from "~/lib/utils";
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+const inputVariants = cva(
+    "flex h-9 w-full rounded-md px-3 bg-transparent border border-input text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+    {
+        variants: {
+            variant: {
+                default: "",
+                ghost: "shadow-none cursor-pointer hover:border-primary px-0 mb-0 font-bold outline-none border-transparent focus:border-primary",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    }
+);
+
+export interface InputProps
+    extends React.InputHTMLAttributes<HTMLInputElement>,
+        VariantProps<typeof inputVariants> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-    ({ className, type, ...props }, ref) => {
+    ({ className, variant, type, ...props }, ref) => {
         return (
             <input
                 type={type}
-                className={cn(
-                    "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-                    className
-                )}
+                className={cn(inputVariants({ variant, className }))}
                 ref={ref}
                 {...props}
             />
@@ -21,4 +36,4 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 );
 Input.displayName = "Input";
 
-export { Input };
+export { Input, inputVariants };

ui/admin/app/routes/_auth.agents.$agent.tsx

@@ -6,7 +6,6 @@ import {
 } from "@remix-run/react";
 import { useCallback } from "react";
 import { $params, $path } from "remix-routes";
-import { z } from "zod";
 
 import { AgentService } from "~/lib/service/api/agentService";
 import { QueryParamSchemas } from "~/lib/service/routeQueryParams";