fix jsx runtime

Author: zemd

src/types.tsx

@@ -1,3 +1,5 @@
+import type { ComponentProps, ElementType } from "react";
+
 export type Prettify<T> = {
   [K in keyof T]: T[K];
 } & {};
@@ -33,9 +35,9 @@ export type PropsWithSlots<
     ? {}
     : {
         slots?: {
-          [K in ArgSlots[number]]?: React.ElementType;
+          [K in ArgSlots[number]]?: ElementType;
         };
         slotProps?: {
-          [K in ArgSlots[number]]?: React.ComponentProps<React.ElementType>;
+          [K in ArgSlots[number]]?: ComponentProps<ElementType>;
         };
       });

src/use-slot.tsx

@@ -1,20 +1,25 @@
-import { useMemo } from "react";
+import React, {
+  type ComponentProps,
+  type ElementType,
+  type FC,
+  type PropsWithChildren,
+} from "react";
 import type { Prettify } from "./types";
 
 // eslint-disable-next-line react-refresh/only-export-components
-const SlotFragment: React.FC<React.PropsWithChildren<{ [x: string]: any }>> = ({
+const SlotFragment: FC<PropsWithChildren<{ [x: string]: any }>> = ({
   children,
 }) => {
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return <>{children}</>;
 };
 SlotFragment.displayName = "@zemd/react-slottable/SlotFragment";
 
-type SlotOptions<T extends React.ElementType> = {
+type SlotOptions<T extends ElementType> = {
   slot?: T;
 };
 
-type SlotsProps<T extends Record<string, React.ElementType>> = {
+type SlotsProps<T extends Record<string, ElementType>> = {
   slots?: T;
 };
 
@@ -26,12 +31,12 @@ type SlotPropsProps<T extends Record<string, any>> = {
  * A hook that returns a component for a given slot.
  */
 export function useSlot<
-  ArgSlotType extends React.ElementType,
+  ArgSlotType extends ElementType,
   ArgSlotOptions extends SlotOptions<ArgSlotType>,
   ReturnComponent extends ArgSlotOptions extends SlotOptions<infer T>
     ? T
-    : React.ElementType,
-  ArgSlotsKeys extends Record<string, React.ElementType>,
+    : ElementType,
+  ArgSlotsKeys extends Record<string, ElementType>,
 >(
   name: keyof ArgSlotsKeys,
   props: Prettify<
@@ -41,15 +46,15 @@ export function useSlot<
 ): ReturnComponent {
   const { slots, slotProps } = props;
 
-  const Slot = useMemo(() => {
+  const Slot = React.useMemo(() => {
     return (slots?.[name] ?? options.slot ?? SlotFragment) as ReturnComponent;
   }, [name, slots, options.slot]);
 
-  return useMemo<ReturnComponent>(() => {
-    const WrappedComponent: React.FC<React.ComponentProps<ReturnComponent>> = (
+  return React.useMemo<ReturnComponent>(() => {
+    const WrappedComponent: FC<ComponentProps<ReturnComponent>> = (
       wrappedProps,
     ) => {
-      const mergedProps: React.ComponentProps<ReturnComponent> = {
+      const mergedProps: ComponentProps<ReturnComponent> = {
         ...slotProps?.[name],
         ...wrappedProps,
       };

tsconfig.json

@@ -2,7 +2,8 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "extends": "@zemd/tsconfig/tsconfig-react.json",
   "compilerOptions": {
-    "noPropertyAccessFromIndexSignature": false
+    "noPropertyAccessFromIndexSignature": false,
+    "jsx": "preserve"
   },
   "include": ["**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

tsup.config.js

@@ -7,4 +7,5 @@ export default defineConfig({
   clean: true,
   dts: true,
   format: ["cjs", "esm"],
+  external: ["react"],
 });