Merge branch 'pr-373'

creativetimofficial · Aug 24, 2023 · a62b7ad · a62b7ad
2 parents fa30373 + a2d7657
commit a62b7ad
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 11 deletions.
diff --git a/docs-content/react/speed-dial/speed-dial-with-text-outside.tsx b/docs-content/react/speed-dial/speed-dial-with-text-outside.tsx
@@ -5,6 +5,7 @@ import {
   SpeedDialContent,
   SpeedDialAction,
   Typography,
+  TypographyProps,
 } from "@material-tailwind/react";
 import {
   PlusIcon,
@@ -14,7 +15,7 @@ import {
 } from "@heroicons/react/24/outline";
 
 export function SpeedDialWithTextOutside() {
-  const labelProps = {
+  const labelProps:Pick<TypographyProps,"variant"|"color"|"className"> = {
     variant: "small",
     color: "blue-gray",
     className:

diff --git a/docs-content/react/timeline/default-timeline.tsx b/docs-content/react/timeline/default-timeline.tsx
@@ -21,7 +21,7 @@ export function DefaultTimeline() {
             </Typography>
           </TimelineHeader>
           <TimelineBody className="pb-8">
-            <Typography variant="small" color="gary" className="font-normal text-gray-600">
+            <Typography variant="small" color="gray" className="font-normal text-gray-600">
               The key to more success is to have a lot of pillows. Put it this way, it took me
               twenty five years to get these plants, twenty five years of blood sweat and tears, and
               I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan
@@ -38,7 +38,7 @@ export function DefaultTimeline() {
             </Typography>
           </TimelineHeader>
           <TimelineBody className="pb-8">
-            <Typography variant="small" color="gary" className="font-normal text-gray-600">
+            <Typography variant="small" color="gray" className="font-normal text-gray-600">
               The key to more success is to have a lot of pillows. Put it this way, it took me
               twenty five years to get these plants, twenty five years of blood sweat and tears, and
               I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan
@@ -54,7 +54,7 @@ export function DefaultTimeline() {
             </Typography>
           </TimelineHeader>
           <TimelineBody>
-            <Typography variant="small" color="gary" className="font-normal text-gray-600">
+            <Typography variant="small" color="gray" className="font-normal text-gray-600">
               The key to more success is to have a lot of pillows. Put it this way, it took me
               twenty five years to get these plants, twenty five years of blood sweat and tears, and
               I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan

diff --git a/docs-content/react/timeline/timeline-with-avatar.tsx b/docs-content/react/timeline/timeline-with-avatar.tsx
@@ -24,7 +24,7 @@ export function TimelineWithAvatar() {
             </Typography>
           </TimelineHeader>
           <TimelineBody className="pb-8">
-            <Typography color="gary" className="font-normal text-gray-600">
+            <Typography color="gray" className="font-normal text-gray-600">
               The key to more success is to have a lot of pillows. Put it this way, it took me
               twenty five years to get these plants, twenty five years of blood sweat and tears, and
               I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan
@@ -43,7 +43,7 @@ export function TimelineWithAvatar() {
             </Typography>
           </TimelineHeader>
           <TimelineBody className="pb-8">
-            <Typography color="gary" className="font-normal text-gray-600">
+            <Typography color="gray" className="font-normal text-gray-600">
               The key to more success is to have a lot of pillows. Put it this way, it took me
               twenty five years to get these plants, twenty five years of blood sweat and tears, and
               I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan
@@ -61,7 +61,7 @@ export function TimelineWithAvatar() {
             </Typography>
           </TimelineHeader>
           <TimelineBody>
-            <Typography color="gary" className="font-normal text-gray-600">
+            <Typography color="gray" className="font-normal text-gray-600">
               The key to more success is to have a lot of pillows. Put it this way, it took me
               twenty five years to get these plants, twenty five years of blood sweat and tears, and
               I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan

diff --git a/docs-content/react/timeline/timeline-with-icon.tsx b/docs-content/react/timeline/timeline-with-icon.tsx
@@ -24,7 +24,7 @@ export function TimelineWithIcon() {
             </Typography>
           </TimelineHeader>
           <TimelineBody className="pb-8">
-            <Typography color="gary" className="font-normal text-gray-600">
+            <Typography color="gray" className="font-normal text-gray-600">
               The key to more success is to have a lot of pillows. Put it this way, it took me
               twenty five years to get these plants, twenty five years of blood sweat and tears, and
               I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan
@@ -43,7 +43,7 @@ export function TimelineWithIcon() {
             </Typography>
           </TimelineHeader>
           <TimelineBody className="pb-8">
-            <Typography color="gary" className="font-normal text-gray-600">
+            <Typography color="gray" className="font-normal text-gray-600">
               The key to more success is to have a lot of pillows. Put it this way, it took me
               twenty five years to get these plants, twenty five years of blood sweat and tears, and
               I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan
@@ -61,7 +61,7 @@ export function TimelineWithIcon() {
             </Typography>
           </TimelineHeader>
           <TimelineBody>
-            <Typography color="gary" className="font-normal text-gray-600">
+            <Typography color="gray" className="font-normal text-gray-600">
               The key to more success is to have a lot of pillows. Put it this way, it took me
               twenty five years to get these plants, twenty five years of blood sweat and tears, and
               I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan

diff --git a/packages/material-tailwind-react/src/components/Typography/index.tsx b/packages/material-tailwind-react/src/components/Typography/index.tsx
@@ -28,7 +28,11 @@ import {
   propTypesChildren,
 } from "../../types/components/typography";
 
-export interface TypographyProps extends React.ComponentProps<any> {
+type Props<T extends keyof JSX.IntrinsicElements> = React.ComponentProps<T>;
+
+
+type BaseTypographyProps =Props<"p"> & Props<"h1"> & Props<"h2"> & Props<"h3"> & Props<"h4"> & Props<"h5"> & Props<"h6"> & Props<"a"> 
+export interface TypographyProps extends BaseTypographyProps {
   variant?: variant;
   color?: color;
   textGradient?: textGradient;