fix types

apps/docs/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@heroicons/react": "^2.1.1",
     "clsx": "^2.1.0",
-    "framer-motion": "^11.0.8",
+    "framer-motion": "^11.13.5",
     "mini-svg-data-uri": "^1.4.4",
     "next": "^15.0.3",
     "nextra": "^2.13.2",

packages/next-admin/src/context/ColorSchemeContext.tsx

@@ -14,12 +14,14 @@ import {
 } from "react";
 import { BasicColorScheme, ColorScheme, colorSchemes } from "../types";
 
-const basicColorSchemeIcons: Record<BasicColorScheme | "system", JSX.Element> =
-  {
-    light: <SunIcon className="h-4 w-4" />,
-    dark: <MoonIcon className="h-4 w-4" />,
-    system: <ComputerDesktopIcon className="h-4 w-4" />,
-  };
+const basicColorSchemeIcons: Record<
+  BasicColorScheme | "system",
+  React.JSX.Element
+> = {
+  light: <SunIcon className="h-4 w-4" />,
+  dark: <MoonIcon className="h-4 w-4" />,
+  system: <ComputerDesktopIcon className="h-4 w-4" />,
+};
 
 type ColorSchemeContextType = {
   colorScheme: ColorScheme;
@@ -43,7 +45,7 @@ export const ColorSchemeProvider = ({ children }: ProviderProps) => {
   const { theme: colorScheme, setTheme: setColorScheme } = useTheme();
 
   const [colorSchemeIcon, setColorSchemeIcon] = useState<
-    JSX.Element | undefined
+    React.JSX.Element | undefined
   >(() => {
     return basicColorSchemeIcons[colorScheme!];
   });

packages/next-admin/src/types.ts

@@ -5,6 +5,7 @@ import { NextRequest, NextResponse } from "next/server";
 import type { ChangeEvent, ReactNode } from "react";
 import type { PropertyValidationError } from "./exceptions/ValidationError";
 import type { NextAdminJSONSchema } from "@premieroctet/next-admin-json-schema";
+import type React from "react";
 
 declare type JSONSchema7Definition = NextAdminJSONSchema & {
   relation?: ModelName;
@@ -258,7 +259,7 @@ export type EditFieldsOptions<T extends ModelName> = {
     /**
      * a React Element that should receive [`CustomInputProps`](#custominputprops). For App Router, this element must be a client component. Don't set any props, they will be passed automatically to the component.
      */
-    input?: React.ReactElement;
+    input?: React.ReactElement<CustomInputProps>;
     /**
      * a helper text that is displayed underneath the input.
      */
@@ -534,7 +535,7 @@ export type EditOptions<T extends ModelName> = {
 
 type CustomFieldsType = {
   [key: string]: {
-    input?: React.ReactElement;
+    input?: React.ReactElement<CustomInputProps>;
     tooltip?: string;
     format?: FormatOptions<any>;
     helperText?: string;
@@ -852,7 +853,7 @@ export type AdminComponentProps = {
   resourcesIcons?: Record<Prisma.ModelName, ModelIcon>;
   customInputs?: Record<
     Field<ModelName>,
-    React.ReactElement | undefined
+    React.ReactElement<CustomInputProps> | undefined
   > | null;
   resourcesIdProperty?: Record<ModelName, string>;
   /**
@@ -895,7 +896,7 @@ export type MainLayoutProps = Pick<
 >;
 
 export type CustomUIProps = {
-  dashboard?: JSX.Element | (() => JSX.Element);
+  dashboard?: React.JSX.Element | (() => React.JSX.Element);
 };
 
 export type ActionFullParams = ActionParams & {
@@ -1102,7 +1103,7 @@ export type FormProps = {
   customInputs?: Record<
     Field<ModelName>,
     React.ReactElement<CustomInputProps> | undefined
-  >;
+  > | null;
   actions?: AdminComponentProps["actions"];
   icon?: ModelIcon;
   resourcesIdProperty: Record<ModelName, string>;

packages/next-admin/src/utils/options.ts

@@ -1,4 +1,9 @@
-import { Field, ModelName, NextAdminOptions } from "../types";
+import type {
+  CustomInputProps,
+  Field,
+  ModelName,
+  NextAdminOptions,
+} from "../types";
 
 /**
  * Get the custom inputs for a model
@@ -12,13 +17,16 @@ export const getCustomInputs = (
   const editFields = options?.model?.[model]?.edit?.fields;
   const customFields = options?.model?.[model]?.edit?.customFields;
 
-  const inputs: Record<string, { input?: React.ReactElement }> = {
+  const inputs: Record<
+    string,
+    { input?: React.ReactElement<CustomInputProps> } | null
+  > = {
     ...editFields,
     ...customFields,
   };
 
   return Object.keys(inputs ?? {}).reduce<
-    Record<string, React.ReactElement | undefined>
+    Record<string, React.ReactElement<CustomInputProps>>
   >((acc, field) => {
     const input = inputs?.[field]?.input;
     if (input) {