fix(registry): correct Select metadata types and add missing props for object values (#471)

Author: mattrothenberg

.changeset/fix-select-registry-metadata.md

@@ -0,0 +1,15 @@
+---
+"@cloudflare/kumo": patch
+---
+
+fix(registry): correct Select component metadata for AI-generated code
+
+The component registry metadata was incorrectly typing Select's `value`, `defaultValue`, and `onValueChange` props as `string`, causing AI agents to produce broken code when implementing Select with object values (e.g., rendering `object.value` in the trigger instead of the label).
+
+Changes:
+- `value` type: `string` → `T` (generic, matches actual component interface)
+- `defaultValue` type: `string` → `T`
+- `onValueChange` type: `(value: string) => void` → `(value: T) => void`
+- Added missing `renderValue` prop: `(value: T) => ReactNode` — required for object values
+- Added missing `items` prop: supports both `Record<string, string>` and `Array<{ label, value }>` forms
+- Added missing `isItemEqualToValue` prop: required for object equality comparison

packages/kumo/scripts/component-registry/metadata.ts

@@ -289,13 +289,28 @@ export const ADDITIONAL_COMPONENT_PROPS: Record<
   },
   Select: {
     onValueChange: {
-      type: "(value: string) => void",
+      type: "(value: T) => void",
       description: "Callback when selection changes",
     },
     defaultValue: {
-      type: "string",
+      type: "T",
       description: "Initial value for uncontrolled mode",
     },
+    renderValue: {
+      type: "(value: T) => ReactNode",
+      description:
+        "A function that returns a ReactNode to format the selected value in the trigger. Required when using object values. Use `placeholder` for the empty state.",
+    },
+    items: {
+      type: 'Record<string, string> | Array<{ label: ReactNode; value: T }>',
+      description:
+        "Data structure of items rendered in the popup. Accepts a plain object map (`{ key: \"Label\" }`) or an array of `{ label, value }` for object/complex values.",
+    },
+    isItemEqualToValue: {
+      type: "(item: T, value: T) => boolean",
+      description:
+        "Custom equality function for comparing items. Required when value is an object, since object identity (`===`) won't match across renders.",
+    },
   },
   DateRangePicker: {
     onStartDateChange: {
@@ -532,7 +547,7 @@ export const PROP_TYPE_OVERRIDES: Record<string, Record<string, string>> = {
     value: "T | T[]",
   },
   Select: {
-    value: "string",
+    value: "T",
   },
 };