fix: make settings controls editable

components/ui/input.tsx

@@ -1 +1,28 @@
-export { Input, Textarea, type InputProps, type InputAreaProps as TextareaProps } from "@cloudflare/kumo/components/input";
+"use client";
+
+import * as React from "react";
+import {
+  Input as KumoInput,
+  Textarea as KumoTextarea,
+  type InputAreaProps as KumoTextareaProps,
+  type InputProps as KumoInputProps,
+} from "@cloudflare/kumo/components/input";
+
+import { cn } from "@/lib/utils";
+
+export type InputProps = KumoInputProps;
+export type TextareaProps = KumoTextareaProps;
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
+  { className, ...props },
+  ref,
+): React.ReactElement {
+  return <KumoInput ref={ref} className={cn("w-full", className)} {...props} />;
+});
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  { className, ...props },
+  ref,
+): React.ReactElement {
+  return <KumoTextarea ref={ref} className={cn("min-h-24 w-full", className)} {...props} />;
+});

components/ui/select.tsx

@@ -3,6 +3,8 @@
 import * as React from "react";
 import { Select as KumoSelect } from "@cloudflare/kumo/components/select";
 
+import { cn } from "@/lib/utils";
+
 export type SelectOption = {
   value: string;
   label: React.ReactNode;
@@ -24,6 +26,7 @@ type SelectProps = {
 };
 
 export function Select({
+  className,
   onValueChange,
   options,
   placeholder,
@@ -33,6 +36,7 @@ export function Select({
 }: SelectProps): React.ReactElement {
   return (
     <KumoSelect<string>
+      className={cn("w-full", className)}
       defaultValue={defaultValue}
       onValueChange={(nextValue) => onValueChange?.(String(nextValue))}
       placeholder={placeholder}