feat(select): auto-render options from items prop when children omitted

[invisal]

Summary

Adds automatic option rendering to the Select component to reduce boilerplate for simple use cases while maintaining full flexibility for complex scenarios.

When the items prop is provided without explicit children, the Select component now automatically generates Select.Option elements. This makes the API more intuitive and reduces code by ~50% for simple select cases.

Changes

• ✅ Add renderOptionsFromItems() helper function to auto-generate Select.Option elements from items prop
  • Supports object map format: { key: "Label" }
  • Supports array format: [{ value, label }]
• ✅ Auto-render children when items is provided but children are omitted
• ✅ Simplify 4 demo functions to showcase the concise API
• ✅ Update documentation page with simplified code examples
• ✅ Regenerate component registry with updated examples

Benefits

• 50% code reduction for simple select cases
• More intuitive API - items prop now feels complete on its own
• Zero breaking changes - explicit children always override auto-rendering
• Maintains flexibility for custom rendering scenarios

Examples

Before (Verbose)

<Select items={{ apple: "Apple", banana: "Banana", cherry: "Cherry" }}>
  <Select.Option value="apple">Apple</Select.Option>
  <Select.Option value="banana">Banana</Select.Option>
  <Select.Option value="cherry">Cherry</Select.Option>
</Select>

After (Concise)

<Select items={{ apple: "Apple", banana: "Banana", cherry: "Cherry" }} />

Files Changed

• packages/kumo/src/components/select/select.tsx (+35 lines)
• packages/kumo-docs-astro/src/components/demos/SelectDemo.tsx (refactored)
• packages/kumo-docs-astro/src/pages/components/select.astro (-31 lines)
• packages/kumo/ai/component-registry.json (auto-updated)
• packages/kumo/ai/component-registry.md (auto-updated)

Stats: 5 files changed, 104 insertions(+), 76 deletions(-)

Testing

• ✅ TypeScript typecheck passed
• ✅ All existing demos continue to work
• ✅ Component registry successfully regenerated
• ✅ Backward compatibility: 100%

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@97

commit: d91d757

[github-actions]

Docs Preview

View docs preview

Commit: d91d757

[github-actions]

Visual Regression Report

7 screenshot(s) with visual changes:

Button / Loading State

1 px (0%) changed

Before	After	Diff

Dialog / Basic Dialog

1,560,568 px (37.47%) changed

Before	After	Diff

Dialog / Confirmation Dialog (Alert)

1,616,128 px (38.81%) changed

Before	After	Diff

Dialog / With Actions

1,560,568 px (37.47%) changed

Before	After	Diff

Dialog (Open)

2,408,918 px (21.57%) changed

Before	After	Diff

Select / Select

14,629 px (1.7%) changed

Before	After	Diff

Select (Open)

661,309 px (5.56%) changed

Before	After	Diff

6 screenshot(s) unchanged

• Button / Variants
• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Button / Disabled State
• Select / Select.Option

---

Generated by Kumo Visual Regression

[mattrothenberg]

LGTM! I might be mis-reading the diff, but it looks like there's some unrelated table example changes in this patch too?

[invisal]

LGTM! I might be mis-reading the diff, but it looks like there's some unrelated table example changes in this patch too?

That's packages/kumo/ai/component-registry.md. It is auto-generated.