feat: adopt kumo green ui system

components/ui/select.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import * as React from "react";
+import { Select as KumoSelect } from "@cloudflare/kumo/components/select";
+
+export type SelectOption = {
+  value: string;
+  label: React.ReactNode;
+  disabled?: boolean;
+};
+
+type SelectProps = {
+  "aria-label"?: string;
+  className?: string;
+  defaultValue?: string;
+  disabled?: boolean;
+  label?: React.ReactNode;
+  name?: string;
+  onValueChange?: (value: string) => void;
+  options: SelectOption[];
+  placeholder?: string;
+  required?: boolean;
+  value?: string;
+};
+
+export function Select({
+  onValueChange,
+  options,
+  placeholder,
+  value,
+  defaultValue,
+  ...props
+}: SelectProps): React.ReactElement {
+  return (
+    <KumoSelect<string>
+      defaultValue={defaultValue}
+      onValueChange={(nextValue) => onValueChange?.(String(nextValue))}
+      placeholder={placeholder}
+      value={value}
+      {...props}
+    >
+      {options.map((option) => (
+        <KumoSelect.Option key={option.value} disabled={option.disabled} value={option.value}>
+          {option.label}
+        </KumoSelect.Option>
+      ))}
+    </KumoSelect>
+  );
+}