fix(types): restore React 19 JSX compatibility for Carousel

CONTRIBUTING.md

@@ -45,6 +45,8 @@ yarn typescript
 yarn lint
 ```
 
+The `yarn typescript` command runs both standard TypeScript type checking and React 19 JSX compatibility tests to ensure your changes work with React 19. You can also run `yarn types:react19` separately to check React 19 compatibility specifically.
+
 To fix formatting and linting errors, run the following:
 
 ```sh
@@ -93,7 +95,8 @@ yarn release
 The `package.json` file contains various scripts for common tasks:
 
 - `yarn bootstrap`: setup project by installing all dependencies and pods.
-- `yarn typescript`: type-check files with TypeScript.
+- `yarn typescript`: type-check files with TypeScript, including React 19 JSX compatibility.
+- `yarn types:react19`: run React 19 JSX compatibility type checking specifically.
 - `yarn lint`: check files with Biome.
 - `yarn lint:fix`: fix formatting and linting issues with Biome.
 - `yarn test`: run unit tests with Jest.

package.json

@@ -33,7 +33,8 @@
 		"test:watch": "jest --watch",
 		"test:coverage": "jest --coverage",
 		"test:ci": "jest --coverage --ci --runInBand --reporters=default --reporters=jest-junit",
-		"types": "tsc --noEmit",
+		"types": "tsc --noEmit && yarn types:react19",
+		"types:react19": "tsc --noEmit -p test/types/react19-jsx/tsconfig.json",
 		"lint": "biome check .",
 		"lint:fix": "biome check --write .",
 		"format": "biome format .",

src/components/Carousel.tsx

@@ -19,10 +19,6 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>((_prop
   );
 });
 
-type CarouselComponent = <T>(
-  props: React.PropsWithChildren<TCarouselProps<T>> & {
-    ref?: React.Ref<ICarouselInstance>;
-  }
-) => React.ReactElement;
+type CarouselComponent = <T>(props: React.PropsWithChildren<TCarouselProps<T>>) => React.ReactNode;
 
 export default Carousel as CarouselComponent;

test/types/react19-jsx/CarouselReact19.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import Carousel from "../../../src";
+
+const carouselElement = (
+  <Carousel width={300} height={200} data={[1, 2, 3]} renderItem={() => <></>} />
+);
+
+type IsExact<A, B> = (<T>() => T extends A ? 1 : 2) extends <T>() => T extends B ? 1 : 2
+  ? (<T>() => T extends B ? 1 : 2) extends <T>() => T extends A ? 1 : 2
+    ? true
+    : false
+  : false;
+
+type Assert<T extends true> = T;
+type CarouselReturn = ReturnType<typeof Carousel<number>>;
+const assertCarouselReturnType: Assert<IsExact<CarouselReturn, React.ReactNode>> = true;
+
+void carouselElement;
+void assertCarouselReturnType;

test/types/react19-jsx/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "jsx": "react-jsx",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "target": "esnext",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "lib": ["esnext"]
+  },
+  "include": ["./CarouselReact19.tsx"]
+}

tsconfig.json

@@ -21,5 +21,5 @@
     "target": "esnext",
     "types": ["jest"]
   },
-  "exclude": ["example", "node_modules", "**/*.test.ts", "**/*.test.tsx"]
+  "exclude": ["example", "node_modules", "test/types", "**/*.test.ts", "**/*.test.tsx"]
 }