diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 97ddd5ce7..70b3adeb3 100644 --- a/CONTRIBUTING.md +++ b/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 diff --git a/packages/material-tailwind-react/package.json b/packages/material-tailwind-react/package.json index c8265d794..27f802d3e 100644 --- a/packages/material-tailwind-react/package.json +++ b/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", diff --git a/packages/material-tailwind-react/src/components/Accordion/AccordionBody.tsx b/packages/material-tailwind-react/src/components/Accordion/AccordionBody.tsx index 942281e03..80680dac9 100644 --- a/packages/material-tailwind-react/src/components/Accordion/AccordionBody.tsx +++ b/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, "ref"> { + className?: className; // Can be removed children: children; - [key: string]: any; } -export const AccordionBody = React.forwardRef( +export const AccordionBody = React.forwardRef, AccordionBodyProps>( ({ className, children, ...rest }, ref) => { // 1. init const { open, animate } = useAccordion(); @@ -48,7 +47,7 @@ export const AccordionBody = React.forwardRef { +export interface AlertProps extends Omit, "animate" | "ref"> { variant?: variant; color?: color; icon?: icon; @@ -52,7 +58,7 @@ export interface AlertProps extends Omit { children: children; } -export const Alert = React.forwardRef( +export const Alert = React.forwardRef, 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( mount: { opacity: 1, }, - }; + } satisfies Variants; const appliedAnimation = merge(mainAnimation, animate); // // 5. icon template diff --git a/packages/material-tailwind-react/src/components/Avatar/index.tsx b/packages/material-tailwind-react/src/components/Avatar/index.tsx index f652942e5..ac184965d 100644 --- a/packages/material-tailwind-react/src/components/Avatar/index.tsx +++ b/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, "ref"> { variant?: variant; size?: size; className?: className; diff --git a/packages/material-tailwind-react/src/components/Progress/index.tsx b/packages/material-tailwind-react/src/components/Progress/index.tsx index 6e8ad4725..3a2503823 100644 --- a/packages/material-tailwind-react/src/components/Progress/index.tsx +++ b/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, "ref"> { variant?: variant; color?: color; size?: size; diff --git a/packages/material-tailwind-react/src/components/Select/index.tsx b/packages/material-tailwind-react/src/components/Select/index.tsx index 5b1b65c1c..6172a30f5 100644 --- a/packages/material-tailwind-react/src/components/Select/index.tsx +++ b/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, "value" | containerProps?: containerProps; } -const Select = React.forwardRef( +const Select = React.forwardRef, SelectProps>( ( { variant, @@ -347,7 +348,7 @@ const Select = React.forwardRef( 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 diff --git a/packages/material-tailwind-react/src/theme/index.ts b/packages/material-tailwind-react/src/theme/index.ts index 1b8361e07..a32c7060e 100644 --- a/packages/material-tailwind-react/src/theme/index.ts +++ b/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, diff --git a/packages/material-tailwind-react/src/types/components/accordion.ts b/packages/material-tailwind-react/src/types/components/accordion.ts index d8faa6646..9ff6cfbfd 100644 --- a/packages/material-tailwind-react/src/types/components/accordion.ts +++ b/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; diff --git a/packages/material-tailwind-react/src/types/components/alert.ts b/packages/material-tailwind-react/src/types/components/alert.ts index 0bf08f83a..ab3656113 100644 --- a/packages/material-tailwind-react/src/types/components/alert.ts +++ b/packages/material-tailwind-react/src/types/components/alert.ts @@ -2,7 +2,7 @@ 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"; /** @@ -10,8 +10,8 @@ import { propTypesColors, propTypesAnimation } from "../generic"; */ // 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; diff --git a/packages/material-tailwind-react/src/types/components/avatar.ts b/packages/material-tailwind-react/src/types/components/avatar.ts index 73a63c467..d842472c7 100644 --- a/packages/material-tailwind-react/src/types/components/avatar.ts +++ b/packages/material-tailwind-react/src/types/components/avatar.ts @@ -1,7 +1,6 @@ import PropTypes from "prop-types"; // generic types -import type { colors } from "../generic"; import { propTypesColors } from "../generic"; /** @@ -9,15 +8,15 @@ import { propTypesColors } from "../generic"; */ // 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; diff --git a/packages/material-tailwind-react/src/types/components/badge.ts b/packages/material-tailwind-react/src/types/components/badge.ts index 4e215635a..93e9319c9 100644 --- a/packages/material-tailwind-react/src/types/components/badge.ts +++ b/packages/material-tailwind-react/src/types/components/badge.ts @@ -2,7 +2,6 @@ import type { ReactNode } from "react"; import PropTypes from "prop-types"; // generic types -import type { colors } from "../generic"; import { propTypesColors } from "../generic"; /** @@ -10,11 +9,11 @@ import { propTypesColors } from "../generic"; */ // 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; @@ -22,16 +21,16 @@ export type containerProps = React.HTMLAttributes; export type containerRef = React.Ref; // 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 }), ]); diff --git a/packages/material-tailwind-react/src/types/components/breadcrumbs.ts b/packages/material-tailwind-react/src/types/components/breadcrumbs.ts index 4b859db69..06f8d9fee 100644 --- a/packages/material-tailwind-react/src/types/components/breadcrumbs.ts +++ b/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; diff --git a/packages/material-tailwind-react/src/types/components/button.ts b/packages/material-tailwind-react/src/types/components/button.ts index 4fbb0f33d..a53a58caf 100644 --- a/packages/material-tailwind-react/src/types/components/button.ts +++ b/packages/material-tailwind-react/src/types/components/button.ts @@ -2,7 +2,6 @@ import type { ReactNode } from "react"; import PropTypes from "prop-types"; // generic types -import type { colors } from "../generic"; import { propTypesColors } from "../generic"; /** @@ -10,9 +9,9 @@ import { propTypesColors } from "../generic"; */ // 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; @@ -20,11 +19,11 @@ 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; diff --git a/packages/material-tailwind-react/src/types/components/card.ts b/packages/material-tailwind-react/src/types/components/card.ts index fa174b736..826fdc9cc 100644 --- a/packages/material-tailwind-react/src/types/components/card.ts +++ b/packages/material-tailwind-react/src/types/components/card.ts @@ -2,7 +2,6 @@ import type { ReactNode } from "react"; import PropTypes from "prop-types"; // generic types -import type { colors } from "../generic"; import { propTypesColors } from "../generic"; /** @@ -10,8 +9,8 @@ import { propTypesColors } from "../generic"; */ // 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; @@ -19,10 +18,10 @@ 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; diff --git a/packages/material-tailwind-react/src/types/components/carousel.ts b/packages/material-tailwind-react/src/types/components/carousel.ts index e17ba9c1e..fb772447c 100644 --- a/packages/material-tailwind-react/src/types/components/carousel.ts +++ b/packages/material-tailwind-react/src/types/components/carousel.ts @@ -32,16 +32,16 @@ export type className = string; export type slideRef = React.Ref; // javascript prop-types -export const propTypesClassName: any = PropTypes.string; -export const propTypesPrevArrow: any = PropTypes.func; -export const propTypesNextArrow: any = PropTypes.func; -export const propTypesNavigation: any = PropTypes.func; -export const propTypesAutoplay: any = PropTypes.bool; -export const propTypesAutoplayDelay: any = PropTypes.number; -export const propTypesTransition: any = PropTypes.object; -export const propTypesLoop: any = PropTypes.bool; -export const propTypesChildren: any = PropTypes.node.isRequired; -export const propTypesSlideRef: any = PropTypes.oneOfType([ +export const propTypesClassName = PropTypes.string; +export const propTypesPrevArrow = PropTypes.func; +export const propTypesNextArrow = PropTypes.func; +export const propTypesNavigation = PropTypes.func; +export const propTypesAutoplay = PropTypes.bool; +export const propTypesAutoplayDelay = PropTypes.number; +export const propTypesTransition = PropTypes.object; +export const propTypesLoop = PropTypes.bool; +export const propTypesChildren = PropTypes.node.isRequired; +export const propTypesSlideRef = PropTypes.oneOfType([ PropTypes.func, PropTypes.shape({ current: PropTypes.any }), ]); diff --git a/packages/material-tailwind-react/src/types/components/checkbox.ts b/packages/material-tailwind-react/src/types/components/checkbox.ts index 26e029695..3a2d1e34b 100644 --- a/packages/material-tailwind-react/src/types/components/checkbox.ts +++ b/packages/material-tailwind-react/src/types/components/checkbox.ts @@ -2,7 +2,6 @@ import type { ReactNode } from "react"; import PropTypes from "prop-types"; // generic types -import type { colors } from "../generic"; import { propTypesColors } from "../generic"; /** @@ -10,7 +9,7 @@ import { propTypesColors } from "../generic"; */ // typescript types -export type color = colors; +export type color = typeof propTypesColor[number]; export type label = ReactNode; export type icon = ReactNode; export type ripple = boolean; @@ -20,10 +19,10 @@ export type objectType = { [key: string]: any; }; // javascript prop-types -export const propTypesColor: any = propTypesColors; -export const propTypesLabel: any = PropTypes.node; -export const propTypesIcon: any = PropTypes.node; -export const propTypesRipple: any = PropTypes.bool; -export const propTypesClassName: any = PropTypes.string; -export const propTypesDisabled: any = PropTypes.bool; -export const propTypesObject: any = PropTypes.instanceOf(Object); +export const propTypesColor = propTypesColors; +export const propTypesLabel = PropTypes.node; +export const propTypesIcon = PropTypes.node; +export const propTypesRipple = PropTypes.bool; +export const propTypesClassName = PropTypes.string; +export const propTypesDisabled = PropTypes.bool; +export const propTypesObject = PropTypes.instanceOf(Object); diff --git a/packages/material-tailwind-react/src/types/components/chip.ts b/packages/material-tailwind-react/src/types/components/chip.ts index ba4d50ea4..f5fb064a8 100644 --- a/packages/material-tailwind-react/src/types/components/chip.ts +++ b/packages/material-tailwind-react/src/types/components/chip.ts @@ -2,7 +2,7 @@ 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"; /** @@ -10,9 +10,9 @@ import { propTypesColors, propTypesAnimation } from "../generic"; */ // typescript types -export type variant = "filled" | "gradient" | "outlined" | "ghost"; -export type size = "sm" | "md" | "lg"; -export type color = colors; +export type variant = typeof propTypesVariant[number]; +export type size = typeof propTypesSize[number]; +export type color = typeof propTypesColor[number]; export type icon = ReactNode; export type open = boolean; export type onClose = () => void; @@ -26,13 +26,13 @@ export type className = string; export type value = ReactNode; // javascript prop-types -export const propTypesVariant: any = ["filled", "gradient", "outlined", "ghost"]; -export const propTypesSize: any = ["sm", "md", "lg"]; -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 propTypesValue: any = PropTypes.node.isRequired; +export const propTypesVariant = ["filled", "gradient", "outlined", "ghost"] as const; +export const propTypesSize = ["sm", "md", "lg"] as const; +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 propTypesValue = PropTypes.node.isRequired; diff --git a/packages/material-tailwind-react/src/types/components/collapse.ts b/packages/material-tailwind-react/src/types/components/collapse.ts index 353e76f2a..a6d173918 100644 --- a/packages/material-tailwind-react/src/types/components/collapse.ts +++ b/packages/material-tailwind-react/src/types/components/collapse.ts @@ -16,7 +16,7 @@ export type open = boolean; export type animate = animation; // javascript prop-types -export const propTypesClassName: any = PropTypes.string; -export const propTypesChildren: any = PropTypes.node.isRequired; -export const propTypesOpen: any = PropTypes.bool.isRequired; -export const propTypesAnimate: any = propTypesAnimation; +export const propTypesClassName = PropTypes.string; +export const propTypesChildren = PropTypes.node.isRequired; +export const propTypesOpen = PropTypes.bool.isRequired; +export const propTypesAnimate = propTypesAnimation; diff --git a/packages/material-tailwind-react/src/types/components/dialog.ts b/packages/material-tailwind-react/src/types/components/dialog.ts index f2b6f57d3..101be5c6d 100644 --- a/packages/material-tailwind-react/src/types/components/dialog.ts +++ b/packages/material-tailwind-react/src/types/components/dialog.ts @@ -12,7 +12,7 @@ import { propTypesDismissType, propTypesAnimation } from "../generic"; // typescript types export type open = boolean; export type handler = React.Dispatch>; -export type size = "xs" | "sm" | "md" | "lg" | "xl" | "xxl"; +export type size = typeof propTypesSize[number]; export type dismiss = dismissType; export type animate = animation; export type divider = boolean; @@ -20,11 +20,11 @@ export type className = string; export type children = ReactNode; // javascript prop-types -export const propTypesOpen: any = PropTypes.bool.isRequired; -export const propTypesHandler: any = PropTypes.func; -export const propTypesSize: any = ["xs", "sm", "md", "lg", "xl", "xxl"]; -export const propTypesDismiss: any = propTypesDismissType; -export const propTypesAnimate: any = propTypesAnimation; -export const propTypesDivider: any = PropTypes.bool; -export const propTypesClassName: any = PropTypes.string; -export const propTypesChildren: any = PropTypes.node.isRequired; +export const propTypesOpen = PropTypes.bool.isRequired; +export const propTypesHandler = PropTypes.func; +export const propTypesSize = ["xs", "sm", "md", "lg", "xl", "xxl"] as const; +export const propTypesDismiss = propTypesDismissType; +export const propTypesAnimate = propTypesAnimation; +export const propTypesDivider = PropTypes.bool; +export const propTypesClassName = PropTypes.string; +export const propTypesChildren = PropTypes.node.isRequired; diff --git a/packages/material-tailwind-react/src/types/components/drawer.ts b/packages/material-tailwind-react/src/types/components/drawer.ts index 8b58f135b..6b8a70bf4 100644 --- a/packages/material-tailwind-react/src/types/components/drawer.ts +++ b/packages/material-tailwind-react/src/types/components/drawer.ts @@ -11,7 +11,7 @@ export type open = boolean; export type size = number; export type overlay = boolean; export type children = React.ReactNode; -export type placement = "top" | "right" | "bottom" | "left"; +export type placement = typeof propTypesPlacement[number]; export type overlayProps = React.ComponentProps<"div">; export type className = string; export type onClose = () => void; @@ -20,17 +20,17 @@ export type transition = AnimationOptions; export type overlayRef = React.Ref; // javascript prop-types -export const propTypesOpen: any = PropTypes.bool.isRequired; -export const propTypesSize: any = PropTypes.number; -export const propTypesOverlay: any = PropTypes.bool; -export const propTypesChildren: any = PropTypes.node.isRequired; -export const propTypesPlacement: any = ["top", "right", "bottom", "left"]; -export const propTypesOverlayProps: any = PropTypes.object; -export const propTypesClassName: any = PropTypes.string; -export const propTypesOnClose: any = PropTypes.func; -export const propTypesDismiss: any = propTypesDismissType; -export const propTypesTransition: any = PropTypes.object; -export const propTypesOverlayRef: any = PropTypes.oneOfType([ +export const propTypesOpen = PropTypes.bool.isRequired; +export const propTypesSize = PropTypes.number; +export const propTypesOverlay = PropTypes.bool; +export const propTypesChildren = PropTypes.node.isRequired; +export const propTypesPlacement = ["top", "right", "bottom", "left"] as const; +export const propTypesOverlayProps = PropTypes.object; +export const propTypesClassName = PropTypes.string; +export const propTypesOnClose = PropTypes.func; +export const propTypesDismiss = propTypesDismissType; +export const propTypesTransition = PropTypes.object; +export const propTypesOverlayRef = PropTypes.oneOfType([ PropTypes.func, PropTypes.shape({ current: PropTypes.any }), ]); diff --git a/packages/material-tailwind-react/src/types/components/input.ts b/packages/material-tailwind-react/src/types/components/input.ts index b096f74e7..bff80c218 100644 --- a/packages/material-tailwind-react/src/types/components/input.ts +++ b/packages/material-tailwind-react/src/types/components/input.ts @@ -1,8 +1,7 @@ -import type { ReactNode } from "react"; +import type { ComponentProps, ReactNode } from "react"; import PropTypes from "prop-types"; // generic types -import type { colors } from "../generic"; import { propTypesColors } from "../generic"; /** @@ -10,33 +9,29 @@ import { propTypesColors } from "../generic"; */ // typescript types -export type variant = "standard" | "outlined" | "static"; -export type size = "md" | "lg"; -export type color = "black" | "white" | colors; +export type variant = typeof propTypesVariant[number]; +export type size = typeof propTypesSize[number]; +export type color = typeof propTypesColor[number]; export type label = string; export type error = boolean; export type success = boolean; export type icon = ReactNode; export type resize = boolean; -export type labelProps = { - [key: string]: any; -}; -export type containerProps = { - [key: string]: any; -}; +export type labelProps = Omit, "ref" | "children">; +export type containerProps = Omit, "ref" | "children">; export type shrink = boolean; export type className = string; // javascript prop-types -export const propTypesVariant: any = ["standard", "outlined", "static"]; -export const propTypesSize: any = ["md", "lg"]; -export const propTypesColor: any = ["black", "white", ...propTypesColors]; -export const propTypesLabel: any = PropTypes.string; -export const propTypesError: any = PropTypes.bool; -export const propTypesSuccess: any = PropTypes.bool; -export const propTypesIcon: any = PropTypes.node; -export const propTypesResize: any = PropTypes.bool; -export const propTypesLabelProps: any = PropTypes.instanceOf(Object); -export const propTypesContainerProps: any = PropTypes.instanceOf(Object); -export const propTypesShrink: any = PropTypes.bool; -export const propTypesClassName: any = PropTypes.string; +export const propTypesVariant = ["standard", "outlined", "static"] as const; +export const propTypesSize = ["md", "lg"] as const; +export const propTypesColor = ["black", "white", ...propTypesColors] as const; +export const propTypesLabel = PropTypes.string; +export const propTypesError = PropTypes.bool; +export const propTypesSuccess = PropTypes.bool; +export const propTypesIcon = PropTypes.node; +export const propTypesResize = PropTypes.bool; +export const propTypesLabelProps = PropTypes.instanceOf(Object); +export const propTypesContainerProps = PropTypes.instanceOf(Object); +export const propTypesShrink = PropTypes.bool; +export const propTypesClassName = PropTypes.string; diff --git a/packages/material-tailwind-react/src/types/components/list.ts b/packages/material-tailwind-react/src/types/components/list.ts index a0b69c1f5..523d1acd5 100644 --- a/packages/material-tailwind-react/src/types/components/list.ts +++ b/packages/material-tailwind-react/src/types/components/list.ts @@ -13,8 +13,8 @@ export type ripple = boolean; export type children = ReactNode; // javascript prop-types -export const propTypesClassName: any = PropTypes.string; -export const propTypesDisabled: any = PropTypes.bool; -export const propTypesSelected: any = PropTypes.bool; -export const propTypesRipple: any = PropTypes.bool; -export const propTypesChildren: any = PropTypes.node.isRequired; +export const propTypesClassName = PropTypes.string; +export const propTypesDisabled = PropTypes.bool; +export const propTypesSelected = PropTypes.bool; +export const propTypesRipple = PropTypes.bool; +export const propTypesChildren = PropTypes.node.isRequired; diff --git a/packages/material-tailwind-react/src/types/components/menu.ts b/packages/material-tailwind-react/src/types/components/menu.ts index 6ffd74955..99d6e3237 100644 --- a/packages/material-tailwind-react/src/types/components/menu.ts +++ b/packages/material-tailwind-react/src/types/components/menu.ts @@ -14,7 +14,6 @@ import type { import type { dismissType, animation, offsetType } from "../generic"; import { propTypesOffsetType, - propTypesDismissType, propTypesAnimation, propTypesPlacements, } from "../generic"; @@ -61,18 +60,26 @@ export type contextValue = { }; // javascript prop-types -export const propTypesOpen: any = PropTypes.bool; -export const propTypesHandler: any = PropTypes.func; -export const propTypesPlacement: any = propTypesPlacements; -export const propTypesOffset: any = propTypesOffsetType; -export const propTypesDismiss: any = PropTypes.shape({ +export const propTypesOpen = PropTypes.bool; +export const propTypesHandler = PropTypes.func; +export const propTypesPlacement = propTypesPlacements; +export const propTypesOffset = propTypesOffsetType; +export const propTypesDismiss = PropTypes.shape({ itemPress: PropTypes.bool, enabled: PropTypes.bool, escapeKey: PropTypes.bool, referencePress: PropTypes.bool, - referencePressEvent: PropTypes.oneOf(["pointerdown", "mousedown", "click"]), + referencePressEvent: PropTypes.oneOf([ + "pointerdown", + "mousedown", + "click", + ] satisfies dismiss["referencePressEvent"][]), outsidePress: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]), - outsidePressEvent: PropTypes.oneOf(["pointerdown", "mousedown", "click"]), + outsidePressEvent: PropTypes.oneOf([ + "pointerdown", + "mousedown", + "click", + ] satisfies dismiss["outsidePressEvent"][]), ancestorScroll: PropTypes.bool, bubbles: PropTypes.oneOfType([ PropTypes.bool, @@ -82,16 +89,16 @@ export const propTypesDismiss: any = PropTypes.shape({ }), ]), }); -export const propTypesAnimate: any = propTypesAnimation; -export const propTypesLockScroll: any = PropTypes.bool; -export const propTypesDisabled: any = PropTypes.bool; -export const propTypesClassName: any = PropTypes.string; -export const propTypesChildren: any = PropTypes.node.isRequired; -export const propTypesContextValue: any = PropTypes.shape({ +export const propTypesAnimate = propTypesAnimation; +export const propTypesLockScroll = PropTypes.bool; +export const propTypesDisabled = PropTypes.bool; +export const propTypesClassName = PropTypes.string; +export const propTypesChildren = PropTypes.node.isRequired; +export const propTypesContextValue = PropTypes.shape({ open: PropTypes.bool.isRequired, handler: PropTypes.func.isRequired, setInternalOpen: PropTypes.func.isRequired, - strategy: PropTypes.oneOf(["fixed", "absolute"]).isRequired, + strategy: PropTypes.oneOf(["fixed", "absolute"] satisfies contextValue["strategy"][]).isRequired, x: PropTypes.number.isRequired, y: PropTypes.number.isRequired, reference: PropTypes.func.isRequired, diff --git a/packages/material-tailwind-react/src/types/components/navbar.ts b/packages/material-tailwind-react/src/types/components/navbar.ts index 97e5a600a..3cffbb4c6 100644 --- a/packages/material-tailwind-react/src/types/components/navbar.ts +++ b/packages/material-tailwind-react/src/types/components/navbar.ts @@ -2,7 +2,7 @@ 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"; /** @@ -10,8 +10,8 @@ import { propTypesColors, propTypesAnimation } from "../generic"; */ // 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 blurred = boolean; export type fullWidth = boolean; @@ -21,12 +21,12 @@ export type open = boolean; export type animate = animation; // javascript prop-types -export const propTypesVariant: any = ["filled", "gradient"]; -export const propTypesColor: any = ["transparent", "white", ...propTypesColors]; -export const propTypesShadow: any = PropTypes.bool; -export const propTypesBlurred: any = PropTypes.bool; -export const propTypesFullWidth: any = PropTypes.bool; -export const propTypesClassName: any = PropTypes.string; -export const propTypesChildren: any = PropTypes.node.isRequired; -export const propTypesOpen: any = PropTypes.bool.isRequired; -export const propTypesAnimate: any = propTypesAnimation; +export const propTypesVariant = ["filled", "gradient"] as const; +export const propTypesColor = ["transparent", "white", ...propTypesColors] as const; +export const propTypesShadow = PropTypes.bool; +export const propTypesBlurred = PropTypes.bool; +export const propTypesFullWidth = PropTypes.bool; +export const propTypesClassName = PropTypes.string; +export const propTypesChildren = PropTypes.node.isRequired; +export const propTypesOpen = PropTypes.bool.isRequired; +export const propTypesAnimate = propTypesAnimation; diff --git a/packages/material-tailwind-react/src/types/components/popover.ts b/packages/material-tailwind-react/src/types/components/popover.ts index 4505ad3e6..cea218510 100644 --- a/packages/material-tailwind-react/src/types/components/popover.ts +++ b/packages/material-tailwind-react/src/types/components/popover.ts @@ -44,19 +44,19 @@ export type className = string; export type children = ReactNode; // javascript prop-types -export const propTypesOpen: any = PropTypes.bool; -export const propTypesHandler: any = PropTypes.func; -export const propTypesPlacement: any = propTypesPlacements; -export const propTypesOffset: any = propTypesOffsetType; -export const propTypesDismiss: any = propTypesDismissType; -export const propTypesAnimate: any = propTypesAnimation; -export const propTypesContent: any = PropTypes.node; -export const propTypesInteractive: any = PropTypes.bool; -export const propTypesClassName: any = PropTypes.string; -export const propTypesChildren: any = PropTypes.node.isRequired; -export const propTypesContextValue: any = PropTypes.shape({ +export const propTypesOpen = PropTypes.bool; +export const propTypesHandler = PropTypes.func; +export const propTypesPlacement = propTypesPlacements; +export const propTypesOffset = propTypesOffsetType; +export const propTypesDismiss = propTypesDismissType; +export const propTypesAnimate = propTypesAnimation; +export const propTypesContent = PropTypes.node; +export const propTypesInteractive = PropTypes.bool; +export const propTypesClassName = PropTypes.string; +export const propTypesChildren = PropTypes.node.isRequired; +export const propTypesContextValue = PropTypes.shape({ open: PropTypes.bool.isRequired, - strategy: PropTypes.oneOf(["fixed", "absolute"]).isRequired, + strategy: PropTypes.oneOf(["fixed", "absolute"] satisfies Strategy[]).isRequired, x: PropTypes.number, y: PropTypes.number, context: PropTypes.instanceOf(Object).isRequired, diff --git a/packages/material-tailwind-react/src/types/components/progress.ts b/packages/material-tailwind-react/src/types/components/progress.ts index c33e74291..a194090d1 100644 --- a/packages/material-tailwind-react/src/types/components/progress.ts +++ b/packages/material-tailwind-react/src/types/components/progress.ts @@ -1,7 +1,7 @@ +import type { ComponentProps } from "react"; import PropTypes from "prop-types"; // generic types -import type { colors } from "../generic"; import { propTypesColors } from "../generic"; /** @@ -9,21 +9,19 @@ import { propTypesColors } from "../generic"; */ // typescript types -export type variant = "filled" | "gradient"; -export type color = colors; -export type size = "sm" | "md" | "lg"; +export type variant = typeof propTypesVariant[number]; +export type color = typeof propTypesColor[number]; +export type size = typeof propTypesSize[number]; export type value = number; export type label = string | boolean; -export type barProps = { - [key: string]: any; -}; +export type barProps = Omit, "ref" | "children">; export type className = string; // javascript prop-types -export const propTypesVariant: any = ["filled", "gradient"]; -export const propTypesColor: any = propTypesColors; -export const propTypesSize: any = ["sm", "md", "lg"]; -export const propTypesValue: any = PropTypes.number; -export const propTypesLabel: any = PropTypes.oneOfType([PropTypes.string, PropTypes.bool]); -export const propTypesBarProps: any = PropTypes.instanceOf(Object); -export const propTypesClassName: any = PropTypes.string; +export const propTypesVariant = ["filled", "gradient"] as const; +export const propTypesColor = propTypesColors; +export const propTypesSize = ["sm", "md", "lg"] as const; +export const propTypesValue = PropTypes.number; +export const propTypesLabel = PropTypes.oneOfType([PropTypes.string, PropTypes.bool]); +export const propTypesBarProps = PropTypes.instanceOf(Object); +export const propTypesClassName = PropTypes.string; diff --git a/packages/material-tailwind-react/src/types/components/rating.ts b/packages/material-tailwind-react/src/types/components/rating.ts index 081666c1b..16c4e46e4 100644 --- a/packages/material-tailwind-react/src/types/components/rating.ts +++ b/packages/material-tailwind-react/src/types/components/rating.ts @@ -2,7 +2,6 @@ import type { ReactNode } from "react"; import PropTypes from "prop-types"; // generic types -import type { colors } from "../generic"; import { propTypesColors } from "../generic"; /** @@ -16,23 +15,23 @@ export type count = number; export type value = number; export type ratedIcon = iconType; export type unratedIcon = iconType; -export type color = "white" | colors; +export type color = typeof propTypesColor[number]; export type className = string; export type onChange = (value: number) => void; export type readonly = boolean; // javascript prop-types -export const propTypesCount: any = PropTypes.number; -export const propTypesValue: any = PropTypes.number; -export const propTypesRatedIcon: any = PropTypes.oneOfType([ +export const propTypesCount = PropTypes.number; +export const propTypesValue = PropTypes.number; +export const propTypesRatedIcon = PropTypes.oneOfType([ PropTypes.node, PropTypes.instanceOf(Object), ]); -export const propTypesUnratedIcon: any = PropTypes.oneOfType([ +export const propTypesUnratedIcon = PropTypes.oneOfType([ PropTypes.node, PropTypes.instanceOf(Object), ]); -export const propTypesColor: any = ["white", ...propTypesColors]; -export const propTypesOnChange: any = PropTypes.func; -export const propTypesClassName: any = PropTypes.string; -export const propTypesReadonly: any = PropTypes.bool; +export const propTypesColor = ["white", ...propTypesColors] as const; +export const propTypesOnChange = PropTypes.func; +export const propTypesClassName = PropTypes.string; +export const propTypesReadonly = PropTypes.bool; diff --git a/packages/material-tailwind-react/src/types/components/select.ts b/packages/material-tailwind-react/src/types/components/select.ts index 3bdefbf33..13fcf048f 100644 --- a/packages/material-tailwind-react/src/types/components/select.ts +++ b/packages/material-tailwind-react/src/types/components/select.ts @@ -1,11 +1,11 @@ -import type { ReactElement, ReactNode } from "react"; +import type { ComponentProps, ReactElement, ReactNode } from "react"; import PropTypes from "prop-types"; // @floating-ui types import type { ContextData } from "@floating-ui/react"; // generic types -import type { colors, dismissType, animation, offsetType } from "../generic"; +import type { dismissType, animation, offsetType } from "../generic"; import { propTypesColors, propTypesOffsetType, @@ -19,9 +19,9 @@ import type React from "react"; */ // typescript types -export type variant = "standard" | "outlined" | "static"; -export type size = "md" | "lg"; -export type color = colors; +export type variant = typeof propTypesVariant[number]; +export type size = typeof propTypesSize[number]; +export type color = typeof propTypesColor[number]; export type label = string; export type error = boolean; export type success = boolean; @@ -34,9 +34,7 @@ export type dismiss = dismissType; export type animate = animation; export type autoHeight = boolean; export type lockScroll = boolean; -export type labelProps = { - [key: string]: any; -}; +export type labelProps = Omit, "ref" | "children">; export type menuProps = { [key: string]: any; }; @@ -59,30 +57,30 @@ export type contextValue = { }; // javascript prop-types -export const propTypesVariant: any = ["standard", "outlined", "static"]; -export const propTypesSize: any = ["md", "lg"]; -export const propTypesColor: any = propTypesColors; -export const propTypesLabel: any = PropTypes.string; -export const propTypesError: any = PropTypes.bool; -export const propTypesSuccess: any = PropTypes.bool; -export const propTypesArrow: any = PropTypes.node; -export const propTypesValue: any = PropTypes.string; -export const propTypesOnChange: any = PropTypes.func; -export const propTypesSelected: any = PropTypes.func; -export const propTypesOffset: any = propTypesOffsetType; -export const propTypesDismiss: any = propTypesDismissType; -export const propTypesAnimate: any = propTypesAnimation; -export const propTypesAutoHeight: any = PropTypes.bool; -export const propTypesLockScroll: any = PropTypes.bool; -export const propTypesLabelProps: any = PropTypes.instanceOf(Object); -export const propTypesMenuProps: any = PropTypes.instanceOf(Object); -export const propTypesIndex: any = PropTypes.number; -export const propTypesDisabled: any = PropTypes.bool; -export const propTypesClassName: any = PropTypes.string; -export const propTypesName: any = PropTypes.string; -export const propTypesChildren: any = PropTypes.node.isRequired; -export const propTypesContainerProps: any = PropTypes.instanceOf(Object); -export const propTypesContextValue: any = PropTypes.shape({ +export const propTypesVariant = ["standard", "outlined", "static"] as const; +export const propTypesSize = ["md", "lg"] as const; +export const propTypesColor = propTypesColors; +export const propTypesLabel = PropTypes.string; +export const propTypesError = PropTypes.bool; +export const propTypesSuccess = PropTypes.bool; +export const propTypesArrow = PropTypes.node; +export const propTypesValue = PropTypes.string; +export const propTypesOnChange = PropTypes.func; +export const propTypesSelected = PropTypes.func; +export const propTypesOffset = propTypesOffsetType; +export const propTypesDismiss = propTypesDismissType; +export const propTypesAnimate = propTypesAnimation; +export const propTypesAutoHeight = PropTypes.bool; +export const propTypesLockScroll = PropTypes.bool; +export const propTypesLabelProps = PropTypes.instanceOf(Object); +export const propTypesMenuProps = PropTypes.instanceOf(Object); +export const propTypesIndex = PropTypes.number; +export const propTypesDisabled = PropTypes.bool; +export const propTypesClassName = PropTypes.string; +export const propTypesName = PropTypes.string; +export const propTypesChildren = PropTypes.node.isRequired; +export const propTypesContainerProps = PropTypes.instanceOf(Object); +export const propTypesContextValue = PropTypes.shape({ selectedIndex: PropTypes.number.isRequired, setSelectedIndex: PropTypes.func.isRequired, activeIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(null)]), diff --git a/packages/material-tailwind-react/src/types/components/slider.ts b/packages/material-tailwind-react/src/types/components/slider.ts index a8cbe6d65..1cfdaec68 100644 --- a/packages/material-tailwind-react/src/types/components/slider.ts +++ b/packages/material-tailwind-react/src/types/components/slider.ts @@ -2,7 +2,6 @@ import type React from "react"; import PropTypes from "prop-types"; // generic types -import type { colors } from "../generic"; import { propTypesColors } from "../generic"; /** @@ -10,8 +9,8 @@ import { propTypesColors } from "../generic"; */ // typescript types -export type color = colors; -export type size = "sm" | "md" | "lg"; +export type color = typeof propTypesColor[number]; +export type size = typeof propTypesSize[number]; export type className = string; export type trackClassName = string; export type thumbClassName = string; @@ -26,20 +25,20 @@ export type inputRef = React.RefObject; export type inputProps = React.ComponentProps<"input">; // javascript prop-types -export const propTypesColor: any = propTypesColors; -export const propTypesSize: any = ["sm", "md", "lg"]; -export const propTypesClassName: any = PropTypes.string; -export const propTypesTrackClassName: any = PropTypes.string; -export const propTypesThumbClassName: any = PropTypes.string; -export const propTypesBarClassName: any = PropTypes.string; -export const propTypesDefaultValue: any = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); -export const propTypesValue: any = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); -export const propTypesOnChange: any = PropTypes.func; -export const propTypesMin: any = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); -export const propTypesMax: any = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); -export const propTypesStep: any = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); -export const propTypesInputRef: any = PropTypes.oneOfType([ +export const propTypesColor = propTypesColors; +export const propTypesSize = ["sm", "md", "lg"] as const; +export const propTypesClassName = PropTypes.string; +export const propTypesTrackClassName = PropTypes.string; +export const propTypesThumbClassName = PropTypes.string; +export const propTypesBarClassName = PropTypes.string; +export const propTypesDefaultValue = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); +export const propTypesValue = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); +export const propTypesOnChange = PropTypes.func; +export const propTypesMin = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); +export const propTypesMax = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); +export const propTypesStep = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); +export const propTypesInputRef = PropTypes.oneOfType([ PropTypes.func, PropTypes.shape({ current: PropTypes.any }), ]); -export const propTypesInputProps: any = PropTypes.instanceOf(Object); +export const propTypesInputProps = PropTypes.instanceOf(Object); diff --git a/packages/material-tailwind-react/src/types/components/speedDial.ts b/packages/material-tailwind-react/src/types/components/speedDial.ts index 5843f45b1..99de3f549 100644 --- a/packages/material-tailwind-react/src/types/components/speedDial.ts +++ b/packages/material-tailwind-react/src/types/components/speedDial.ts @@ -25,11 +25,11 @@ export type animate = animation; export type className = string; // javascript prop-types -export const propTypesOpen: any = PropTypes.bool; -export const propTypesHanlder: any = PropTypes.func; -export const propTypesPlacement: any = PropTypes.oneOf(propTypesPlacements); -export const propTypesOffset: any = propTypesOffsetType; -export const propTypesDismiss: any = propTypesDismissType; -export const propTypesChildren: any = PropTypes.node.isRequired; -export const propTypesAnimate: any = propTypesAnimation; -export const propTypesClassName: any = PropTypes.string; +export const propTypesOpen = PropTypes.bool; +export const propTypesHanlder = PropTypes.func; +export const propTypesPlacement = PropTypes.oneOf(propTypesPlacements); +export const propTypesOffset = propTypesOffsetType; +export const propTypesDismiss = propTypesDismissType; +export const propTypesChildren = PropTypes.node.isRequired; +export const propTypesAnimate = propTypesAnimation; +export const propTypesClassName = PropTypes.string; diff --git a/packages/material-tailwind-react/src/types/components/spinner.ts b/packages/material-tailwind-react/src/types/components/spinner.ts index ed8541f09..4f2658f8c 100644 --- a/packages/material-tailwind-react/src/types/components/spinner.ts +++ b/packages/material-tailwind-react/src/types/components/spinner.ts @@ -1,7 +1,6 @@ import PropTypes from "prop-types"; // generic types -import type { colors } from "../generic"; import { propTypesColors } from "../generic"; /** @@ -9,9 +8,10 @@ import { propTypesColors } from "../generic"; */ // typescript types -export type color = colors; +// export type color = colors; // old version miss "white" +export type color = typeof propTypesColor[number]; export type className = string; // javascript prop-types -export const propTypesColor: any = ["white", ...propTypesColors]; -export const propTypesClassName: any = PropTypes.string; +export const propTypesColor = ["white", ...propTypesColors] as const; +export const propTypesClassName = PropTypes.string; diff --git a/packages/material-tailwind-react/src/types/components/stepper.ts b/packages/material-tailwind-react/src/types/components/stepper.ts index a0e2d2dd3..8c8153d2f 100644 --- a/packages/material-tailwind-react/src/types/components/stepper.ts +++ b/packages/material-tailwind-react/src/types/components/stepper.ts @@ -1,4 +1,4 @@ -import type { ReactNode, ReactElement, JSXElementConstructor } from "react"; +import type { ReactNode } from "react"; import PropTypes from "prop-types"; /** @@ -13,8 +13,8 @@ export type children = ReactNode; export type className = string; // javascript prop-types -export const propTypesActiveStep: any = PropTypes.number; -export const propTypesIsLastStep: any = PropTypes.func; -export const propTypesIsFirstStep: any = PropTypes.func; -export const propTypesChildren: any = PropTypes.node; -export const propTypesClassName: any = PropTypes.string; +export const propTypesActiveStep = PropTypes.number; +export const propTypesIsLastStep = PropTypes.func; +export const propTypesIsFirstStep = PropTypes.func; +export const propTypesChildren = PropTypes.node; +export const propTypesClassName = PropTypes.string; diff --git a/packages/material-tailwind-react/src/types/components/tabs.ts b/packages/material-tailwind-react/src/types/components/tabs.ts index 7f7574ac3..176ac286e 100644 --- a/packages/material-tailwind-react/src/types/components/tabs.ts +++ b/packages/material-tailwind-react/src/types/components/tabs.ts @@ -23,14 +23,14 @@ export type indicatorProps = { export type children = ReactNode; // javascript prop-types -export const propTypesId: any = PropTypes.string; -export const propTypesValue: any = PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number, -]).isRequired; -export const propTypesAnimate: any = propTypesAnimation; -export const propTypesDisabled: any = PropTypes.bool; -export const propTypesClassName: any = PropTypes.string; -export const propTypesOrientation: any = PropTypes.oneOf(["horizontal", "vertical"]); -export const propTypesIndicator: any = PropTypes.instanceOf(Object); -export const propTypesChildren: any = PropTypes.node.isRequired; +export const propTypesId = PropTypes.string; +export const propTypesValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired; +export const propTypesAnimate = propTypesAnimation; +export const propTypesDisabled = PropTypes.bool; +export const propTypesClassName = PropTypes.string; +export const propTypesOrientation = PropTypes.oneOf([ + "horizontal", + "vertical", +] satisfies orientation[]); +export const propTypesIndicator = PropTypes.instanceOf(Object); +export const propTypesChildren = PropTypes.node.isRequired; diff --git a/packages/material-tailwind-react/src/types/components/timeline.ts b/packages/material-tailwind-react/src/types/components/timeline.ts index 940492a81..2e5453b6c 100644 --- a/packages/material-tailwind-react/src/types/components/timeline.ts +++ b/packages/material-tailwind-react/src/types/components/timeline.ts @@ -2,7 +2,6 @@ import type { ReactNode } from "react"; import PropTypes from "prop-types"; // generic types -import type { colors } from "../generic"; import { propTypesColors } from "../generic"; /** @@ -12,11 +11,11 @@ import { propTypesColors } from "../generic"; // typescript types export type className = string; export type children = ReactNode; -export type color = "white" | colors; -export type variant = "filled" | "outlined" | "ghost" | "gradient"; +export type color = typeof propTypeColor[number]; +export type variant = typeof propTypeVariant[number]; // javascript prop-types -export const propTypeClassName: any = PropTypes.string; -export const propTypeChildren: any = PropTypes.node; -export const propTypeColor: any = ["white", ...propTypesColors]; -export const propTypeVariant: any = ["filled", "outlined", "ghost", "gradient"]; +export const propTypeClassName = PropTypes.string; +export const propTypeChildren = PropTypes.node; +export const propTypeColor = ["white", ...propTypesColors] as const; +export const propTypeVariant = ["filled", "outlined", "ghost", "gradient"] as const; diff --git a/packages/material-tailwind-react/src/types/components/typography.ts b/packages/material-tailwind-react/src/types/components/typography.ts index 87070f08e..134c636df 100644 --- a/packages/material-tailwind-react/src/types/components/typography.ts +++ b/packages/material-tailwind-react/src/types/components/typography.ts @@ -2,7 +2,6 @@ import type { ReactNode, ElementType } from "react"; import PropTypes from "prop-types"; // generic types -import type { colors } from "../generic"; import { propTypesColors } from "../generic"; /** @@ -10,15 +9,15 @@ import { propTypesColors } from "../generic"; */ // typescript types -export type variant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "lead" | "paragraph" | "small"; -export type color = "inherit" | "current" | "black" | "white" | colors; +export type variant = typeof propTypesVariant[number]; +export type color = typeof propTypesColor[number]; export type asType = ElementType; export type textGradient = boolean; export type className = string; export type children = ReactNode; // javascript prop-types -export const propTypesVariant: any = [ +export const propTypesVariant = [ "h1", "h2", "h3", @@ -28,9 +27,9 @@ export const propTypesVariant: any = [ "lead", "paragraph", "small", -]; -export const propTypesColor: any = ["inherit", "current", "black", "white", ...propTypesColors]; -export const propTypesAs: any = PropTypes.elementType; -export const propTypesTextGradient: any = PropTypes.bool; -export const propTypesClassName: any = PropTypes.string; -export const propTypesChildren: any = PropTypes.node.isRequired; +] as const; +export const propTypesColor = ["inherit", "current", "black", "white", ...propTypesColors] as const; +export const propTypesAs = PropTypes.elementType; +export const propTypesTextGradient = PropTypes.bool; +export const propTypesClassName = PropTypes.string; +export const propTypesChildren = PropTypes.node.isRequired; diff --git a/packages/material-tailwind-react/src/types/generic.ts b/packages/material-tailwind-react/src/types/generic.ts index 48bc734a1..955f582f8 100644 --- a/packages/material-tailwind-react/src/types/generic.ts +++ b/packages/material-tailwind-react/src/types/generic.ts @@ -1,33 +1,14 @@ import PropTypes from "prop-types"; -import type { AnimatePresenceProps } from "framer-motion"; +import type { AnimatePresenceProps, Variant } from "framer-motion"; import type { UseDismissProps } from "@floating-ui/react"; // typescript types -export type colors = - | "blue-gray" - | "gray" - | "brown" - | "deep-orange" - | "orange" - | "amber" - | "yellow" - | "lime" - | "light-green" - | "green" - | "teal" - | "cyan" - | "light-blue" - | "blue" - | "indigo" - | "deep-purple" - | "purple" - | "pink" - | "red"; +export type colors = typeof propTypesColors[number]; export type animation = { - initial?: object; - mount?: object; - unmount?: object; + initial?: Variant; + mount?: Variant; + unmount?: Variant; }; export interface dismissType extends UseDismissProps {} @@ -45,7 +26,7 @@ export interface NewAnimatePresenceProps extends Omit