fix(kumo): correct return types for ShikiProvider and CodeHighlighted (#244)

* fix(kumo): correct return types for ShikiProvider and CodeHighlighted

- Change return type from ReactNode to React.JSX.Element for JSX compatibility
- Fixes TypeScript errors when consuming components in stricter tsconfig environments
- Add CodeHighlighted to docs search, exclude deprecated Code/CodeBlock

* chore: add changeset

Author: mattrothenberg

.changeset/fix-shiki-provider-types.md

@@ -0,0 +1,7 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Fix TypeScript return types for ShikiProvider and CodeHighlighted components.
+
+Changed return type from `ReactNode` to `React.JSX.Element` to resolve JSX compatibility errors. This fixes issues when consuming these components in projects with stricter TypeScript configurations (e.g., `skipLibCheck: false`), where `ReactNode` was incorrectly inferred as a valid JSX element return type.

packages/kumo-docs-astro/src/components/SearchDialog.tsx

@@ -19,6 +19,8 @@ import {
  * 3. Add its description to COMPONENT_DESCRIPTIONS below
  */
 const COMPONENTS_WITHOUT_DOCS = new Set([
+  "Code", // Deprecated: use CodeHighlighted from @cloudflare/kumo/code
+  "CodeBlock", // Deprecated: use CodeHighlighted from @cloudflare/kumo/code
   "DateRangePicker", // Deprecated: use DatePicker with mode="range"
   "Field",
   "Icon",
@@ -31,6 +33,7 @@ const COMPONENTS_WITHOUT_DOCS = new Set([
  * Only needed when the name doesn't match the standard kebab-case conversion.
  */
 const SLUG_OVERRIDES: Record<string, string> = {
+  CodeHighlighted: "code-highlighted",
   DropdownMenu: "dropdown",
 };
 
@@ -43,6 +46,7 @@ const STATIC_PAGES: Array<{
   description: string;
   url: string;
   category: string;
+  type?: "component" | "block" | "layout" | "page";
 }> = [
   {
     name: "Installation",
@@ -100,6 +104,13 @@ const STATIC_PAGES: Array<{
     url: "/registry",
     category: "Guides",
   },
+  {
+    name: "CodeHighlighted",
+    description: "Syntax-highlighted code blocks powered by Shiki.",
+    url: "/components/code-highlighted",
+    category: "Components",
+    type: "component",
+  },
 ];
 
 /** Better descriptions from the Astro doc pages */
@@ -332,7 +343,7 @@ export function SearchDialog({ open, onOpenChange }: SearchDialogProps) {
     // Always include static pages
     const staticItems: SearchItem[] = STATIC_PAGES.map((page) => ({
       name: page.name,
-      type: "page" as const,
+      type: page.type ?? "page",
       description: page.description,
       category: page.category,
       url: page.url,

packages/kumo/src/code/code-highlighted.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useCallback, useMemo, type ReactNode } from "react";
+import React, { useState, useCallback, useMemo } from "react";
 import { cn } from "../utils/cn";
 import { Button } from "../components/button";
 import { useShikiHighlighter } from "./use-shiki-highlighter";
@@ -39,7 +39,7 @@ export function CodeHighlighted({
   showCopyButton = false,
   labels: labelOverrides,
   className,
-}: CodeHighlightedProps): ReactNode {
+}: CodeHighlightedProps): React.JSX.Element {
   const {
     highlight,
     isLoading,

packages/kumo/src/code/provider.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useMemo, type ReactNode } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { ShikiContext, type ShikiContextValue } from "./context";
 import type { ShikiProviderProps, SupportedLanguage } from "./types";
 
@@ -65,7 +65,7 @@ export function ShikiProvider({
   languages,
   labels,
   children,
-}: ShikiProviderProps): ReactNode {
+}: ShikiProviderProps): React.JSX.Element {
   const [state, setState] = useState<{
     highlighter: ShikiContextValue["highlighter"];
     isLoading: boolean;
@@ -111,7 +111,7 @@ export function ShikiProvider({
 
         const highlighter = await createHighlighterCore({
           themes: [githubLight.default, vesper.default],
-      
+
           langs: langModules.map((m) => m.default) as any,
           engine: engineInstance,
         });