enhance ts

CONTRIBUTING.md

@@ -6,7 +6,7 @@ Even if you have little to no experience with Tailwind CSS, JavaScript or React,
 
 ## Development Setup
 
-Material Tailwind is using PNPM workspaces and you need to execute the following commands after clonning the repository.
+Material Tailwind is using PNPM workspaces and you need to execute the following commands after cloning the repository.
 
 1. Install dependencies
 

packages/material-tailwind-react/package.json

@@ -37,6 +37,7 @@
     "@swc/cli": "0.1.59",
     "@swc/core": "1.3.24",
     "@types/node": "18.11.18",
+    "@types/prop-types": "^15.7.12",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",
     "@typescript-eslint/eslint-plugin": "5.47.1",

packages/material-tailwind-react/src/components/Accordion/AccordionBody.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 // framer-motion
-import { m, MotionProps, domAnimation, LazyMotion } from "framer-motion";
+import { m, domAnimation, LazyMotion, type Variants } from "framer-motion";
 
 // utils
 import classnames from "classnames";
@@ -17,13 +17,12 @@ import { useTheme } from "../../context/theme";
 import type { className, children } from "../../types/components/accordion";
 import { propTypesClassName, propTypesChildren } from "../../types/components/accordion";
 
-export interface AccordionBodyProps extends MotionProps {
-  className?: className;
+export interface AccordionBodyProps extends Omit<React.ComponentProps<typeof m.div>, "ref"> {
+  className?: className; // Can be removed
   children: children;
-  [key: string]: any;
 }
 
-export const AccordionBody = React.forwardRef<HTMLDivElement, AccordionBodyProps>(
+export const AccordionBody = React.forwardRef<React.ElementRef<typeof m.div>, AccordionBodyProps>(
   ({ className, children, ...rest }, ref) => {
     // 1. init
     const { open, animate } = useAccordion();
@@ -48,7 +47,7 @@ export const AccordionBody = React.forwardRef<HTMLDivElement, AccordionBodyProps
         height: "auto",
         transition: { duration: 0.2, times: [0.4, 0, 0.2, 1] },
       },
-    };
+    } satisfies Variants;
 
     const mainAnimation = {
       unmount: {
@@ -57,7 +56,7 @@ export const AccordionBody = React.forwardRef<HTMLDivElement, AccordionBodyProps
       mount: {
         transition: { duration: 0.3, ease: "linear" },
       },
-    };
+    } satisfies Variants;
 
     const appliedAnimation = merge(heightAnimation, animate);
 

packages/material-tailwind-react/src/components/Alert/index.tsx

@@ -2,7 +2,13 @@ import React from "react";
 import PropTypes from "prop-types";
 
 // framer-motion
-import { AnimatePresence, m, MotionProps, domAnimation, LazyMotion } from "framer-motion";
+import {
+  AnimatePresence,
+  m,
+  domAnimation,
+  LazyMotion,
+  type Variants,
+} from "framer-motion";
 
 // utils
 import classnames from "classnames";
@@ -40,7 +46,7 @@ import {
 } from "../../types/components/alert";
 import IconButton from "../IconButton";
 
-export interface AlertProps extends Omit<MotionProps, "animate"> {
+export interface AlertProps extends Omit<React.ComponentProps<typeof m.div>, "animate" | "ref"> {
   variant?: variant;
   color?: color;
   icon?: icon;
@@ -52,7 +58,7 @@ export interface AlertProps extends Omit<MotionProps, "animate"> {
   children: children;
 }
 
-export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+export const Alert = React.forwardRef<React.ElementRef<typeof m.div>, AlertProps>(
   ({ variant, color, icon, open, action, onClose, animate, className, children, ...rest }, ref) => {
     // 1. init
     const { alert } = useTheme();
@@ -87,7 +93,7 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       mount: {
         opacity: 1,
       },
-    };
+    } satisfies Variants;
     const appliedAnimation = merge(mainAnimation, animate);
 
     // // 5. icon template

packages/material-tailwind-react/src/components/Avatar/index.tsx

@@ -20,7 +20,7 @@ import {
   propTypesWithBorder,
 } from "../../types/components/avatar";
 
-export interface AvatarProps extends React.ComponentProps<"img"> {
+export interface AvatarProps extends Omit<React.ComponentProps<"img">, "ref"> {
   variant?: variant;
   size?: size;
   className?: className;

packages/material-tailwind-react/src/components/Progress/index.tsx

@@ -30,7 +30,7 @@ import {
   propTypesClassName,
 } from "../../types/components/progress";
 
-export interface ProgressProps extends React.ComponentProps<"div"> {
+export interface ProgressProps extends Omit<React.ComponentProps<"div">, "ref"> {
   variant?: variant;
   color?: color;
   size?: size;

packages/material-tailwind-react/src/components/Select/index.tsx

@@ -25,6 +25,7 @@ import {
   useIsomorphicLayoutEffect,
   LazyMotion,
   domAnimation,
+  type Variants,
 } from "framer-motion";
 
 // utils
@@ -114,7 +115,7 @@ export interface SelectProps extends Omit<React.ComponentProps<"div">, "value" |
   containerProps?: containerProps;
 }
 
-const Select = React.forwardRef<HTMLDivElement, SelectProps>(
+const Select = React.forwardRef<React.ElementRef<"div">, SelectProps>(
   (
     {
       variant,
@@ -347,7 +348,7 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(
         transform: "scale(1)",
         transition: { duration: 0.2, times: [0.4, 0, 0.2, 1] },
       },
-    };
+    } satisfies Variants;
     const appliedAnimation = merge(animation, animate);
 
     // 6. create an instance of AnimatePresence because of the types issue with the children

packages/material-tailwind-react/src/theme/index.ts

@@ -50,7 +50,7 @@ import {
 import { step, stepper } from "./components/stepper";
 import { speedDial, speedDialContent, speedDialAction } from "./components/speedDial";
 
-const theme: any = {
+const theme = {
   accordion,
   alert,
   avatar,

packages/material-tailwind-react/src/types/components/accordion.ts

@@ -18,10 +18,10 @@ export type className = string;
 export type children = ReactNode;
 
 // javascript prop-types
-export const propTypesOpen: any = PropTypes.bool.isRequired;
-export const propTypesIcon: any = PropTypes.node;
-export const propTypesAnimate: any = propTypesAnimation;
-export const propTypesDisabled: any = PropTypes.bool;
-export const propTypesClassName: any = PropTypes.string;
-export const propTypesValue: any = PropTypes.instanceOf(Object).isRequired;
-export const propTypesChildren: any = PropTypes.node.isRequired;
+export const propTypesOpen = PropTypes.bool.isRequired;
+export const propTypesIcon = PropTypes.node;
+export const propTypesAnimate = propTypesAnimation;
+export const propTypesDisabled = PropTypes.bool;
+export const propTypesClassName = PropTypes.string;
+export const propTypesValue = PropTypes.instanceOf(Object).isRequired;
+export const propTypesChildren = PropTypes.node.isRequired;

packages/material-tailwind-react/src/types/components/alert.ts

@@ -2,16 +2,16 @@ import type { ReactNode } from "react";
 import PropTypes from "prop-types";
 
 // generic types
-import type { colors, animation } from "../generic";
+import type { animation } from "../generic";
 import { propTypesColors, propTypesAnimation } from "../generic";
 
 /**
  * This file contains the types and prop-types for Alert component.
  */
 
 // typescript types
-export type variant = "filled" | "gradient" | "outlined" | "ghost";
-export type color = colors;
+export type variant = typeof propTypesVariant[number];
+export type color = typeof propTypesColor[number];
 export type icon = ReactNode;
 export type open = boolean;
 export type onClose = () => void;
@@ -21,12 +21,12 @@ export type className = string;
 export type children = ReactNode;
 
 // javascript prop-types
-export const propTypesVariant: any = ["filled", "gradient", "outlined", "ghost"];
-export const propTypesColor: any = propTypesColors;
-export const propTypesIcon: any = PropTypes.node;
-export const propTypesOpen: any = PropTypes.bool;
-export const propTypesOnClose: any = PropTypes.func;
-export const propTypesAction: any = PropTypes.node;
-export const propTypesAnimate: any = propTypesAnimation;
-export const propTypesClassName: any = PropTypes.string;
-export const propTypesChildren: any = PropTypes.node.isRequired;
+export const propTypesVariant = ["filled", "gradient", "outlined", "ghost"];
+export const propTypesColor = propTypesColors;
+export const propTypesIcon = PropTypes.node;
+export const propTypesOpen = PropTypes.bool;
+export const propTypesOnClose = PropTypes.func;
+export const propTypesAction = PropTypes.node;
+export const propTypesAnimate = propTypesAnimation;
+export const propTypesClassName = PropTypes.string;
+export const propTypesChildren = PropTypes.node.isRequired;

packages/material-tailwind-react/src/types/components/avatar.ts

@@ -1,23 +1,22 @@
 import PropTypes from "prop-types";
 
 // generic types
-import type { colors } from "../generic";
 import { propTypesColors } from "../generic";
 
 /**
  * This file contains the types and prop-types for Avatar component.
  */
 
 // typescript types
-export type variant = "circular" | "rounded" | "square";
-export type size = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type variant = typeof propTypesVariant[number];
+export type size = typeof propTypesSize[number];
 export type className = string;
 export type withBorder = boolean;
-export type color = colors;
+export type color = typeof propTypesColor[number];
 
 // javascript prop-types
-export const propTypesVariant: any = ["circular", "rounded", "square"];
-export const propTypesSize: any = ["xs", "sm", "md", "lg", "xl", "xxl"];
-export const propTypesClassName: any = PropTypes.string;
-export const propTypesWithBorder: any = PropTypes.bool;
-export const propTypesColor: any = ["white", ...propTypesColors];
+export const propTypesVariant = ["circular", "rounded", "square"] as const;
+export const propTypesSize = ["xs", "sm", "md", "lg", "xl", "xxl"] as const;
+export const propTypesClassName = PropTypes.string;
+export const propTypesWithBorder = PropTypes.bool;
+export const propTypesColor = ["white", ...propTypesColors] as const;

packages/material-tailwind-react/src/types/components/badge.ts

@@ -2,36 +2,35 @@ import type { ReactNode } from "react";
 import PropTypes from "prop-types";
 
 // generic types
-import type { colors } from "../generic";
 import { propTypesColors } from "../generic";
 
 /**
  * This file contains the types and prop-types for Badge component.
  */
 
 // typescript types
-export type color = "white" | colors;
+export type color = typeof propTypesColor[number];
 export type invisible = boolean;
 export type withBorder = boolean;
-export type overlap = "circular" | "square";
-export type placement = "top-start" | "top-end" | "bottom-start" | "bottom-end";
+export type overlap = typeof propTypesOverlap[number];
+export type placement = typeof propTypesPlacement[number];
 export type className = string;
 export type content = ReactNode;
 export type children = ReactNode;
 export type containerProps = React.HTMLAttributes<HTMLDivElement>;
 export type containerRef = React.Ref<HTMLDivElement>;
 
 // javascript prop-types
-export const propTypesColor: any = ["white", ...propTypesColors];
-export const propTypesInvisible: any = PropTypes.bool;
-export const propTypesWithBorder: any = PropTypes.bool;
-export const propTypesOverlap: any = ["circular", "square"];
-export const propTypesPlacement: any = ["top-start", "top-end", "bottom-start", "bottom-end"];
-export const propTypesClassName: any = PropTypes.string;
-export const propTypesContent: any = PropTypes.node;
-export const propTypesChildren: any = PropTypes.node.isRequired;
-export const propTypesContainerProps: any = PropTypes.instanceOf(Object);
-export const propTypesContainerRef: any = PropTypes.oneOfType([
+export const propTypesColor = ["white", ...propTypesColors] as const;
+export const propTypesInvisible = PropTypes.bool;
+export const propTypesWithBorder = PropTypes.bool;
+export const propTypesOverlap = ["circular", "square"] as const;
+export const propTypesPlacement = ["top-start", "top-end", "bottom-start", "bottom-end"] as const;
+export const propTypesClassName = PropTypes.string;
+export const propTypesContent = PropTypes.node;
+export const propTypesChildren = PropTypes.node.isRequired;
+export const propTypesContainerProps = PropTypes.instanceOf(Object);
+export const propTypesContainerRef = PropTypes.oneOfType([
   PropTypes.func,
   PropTypes.shape({ current: PropTypes.any }),
 ]);

packages/material-tailwind-react/src/types/components/breadcrumbs.ts

@@ -12,7 +12,7 @@ export type className = string;
 export type children = ReactNode;
 
 // javascript prop-types
-export const propTypesSeparator: any = PropTypes.node;
-export const propTypesFullWidth: any = PropTypes.bool;
-export const propTypesClassName: any = PropTypes.string;
-export const propTypesChildren: any = PropTypes.node.isRequired;
+export const propTypesSeparator = PropTypes.node;
+export const propTypesFullWidth = PropTypes.bool;
+export const propTypesClassName = PropTypes.string;
+export const propTypesChildren = PropTypes.node.isRequired;

packages/material-tailwind-react/src/types/components/button.ts

@@ -2,29 +2,28 @@ import type { ReactNode } from "react";
 import PropTypes from "prop-types";
 
 // generic types
-import type { colors } from "../generic";
 import { propTypesColors } from "../generic";
 
 /**
  * This file contains the types and prop-types for Button and IconButton component.
  */
 
 // typescript types
-export type variant = "filled" | "outlined" | "gradient" | "text";
-export type size = "sm" | "md" | "lg";
-export type color = "white" | "black" | colors;
+export type variant = typeof propTypesVariant[number];
+export type size = typeof propTypesSize[number];
+export type color = typeof propTypesColor[number];
 export type fullWidth = boolean;
 export type ripple = boolean;
 export type className = string;
 export type children = ReactNode;
 export type loading = boolean;
 
 // javascript prop-types
-export const propTypesVariant: any = ["filled", "outlined", "gradient", "text"];
-export const propTypesSize: any = ["sm", "md", "lg"];
-export const propTypesColor: any = ["white", "black", ...propTypesColors];
-export const propTypesFullWidth: any = PropTypes.bool;
-export const propTypesRipple: any = PropTypes.bool;
-export const propTypesClassName: any = PropTypes.string;
-export const propTypesChildren: any = PropTypes.node.isRequired;
-export const propTypesLoading: any = PropTypes.bool;
+export const propTypesVariant = ["filled", "outlined", "gradient", "text"] as const;
+export const propTypesSize = ["sm", "md", "lg"] as const;
+export const propTypesColor = ["white", "black", ...propTypesColors] as const;
+export const propTypesFullWidth = PropTypes.bool;
+export const propTypesRipple = PropTypes.bool;
+export const propTypesClassName = PropTypes.string;
+export const propTypesChildren = PropTypes.node.isRequired;
+export const propTypesLoading = PropTypes.bool;

packages/material-tailwind-react/src/types/components/card.ts

@@ -2,27 +2,26 @@ import type { ReactNode } from "react";
 import PropTypes from "prop-types";
 
 // generic types
-import type { colors } from "../generic";
 import { propTypesColors } from "../generic";
 
 /**
  * This file contains the types and prop-types for Card, CardHeader, CardBody and CardFooter components.
  */
 
 // typescript types
-export type variant = "filled" | "gradient";
-export type color = "transparent" | "white" | colors;
+export type variant = typeof propTypesVariant[number];
+export type color = typeof propTypesColor[number];
 export type shadow = boolean;
 export type floated = boolean;
 export type divider = boolean;
 export type className = string;
 export type children = ReactNode;
 
 // javascript prop-types
-export const propTypesVariant: any = ["filled", "gradient"];
-export const propTypesColor: any = ["transparent", "white", ...propTypesColors];
-export const propTypesShadow: any = PropTypes.bool;
-export const propTypesFloated: any = PropTypes.bool;
-export const propTypesDivider: any = PropTypes.bool;
-export const propTypesClassName: any = PropTypes.string;
-export const propTypesChildren: any = PropTypes.node.isRequired;
+export const propTypesVariant = ["filled", "gradient"] as const;
+export const propTypesColor = ["transparent", "white", ...propTypesColors] as const;
+export const propTypesShadow = PropTypes.bool;
+export const propTypesFloated = PropTypes.bool;
+export const propTypesDivider = PropTypes.bool;
+export const propTypesClassName = PropTypes.string;
+export const propTypesChildren = PropTypes.node.isRequired;