release: 7.0.0

README.txt

@@ -1,6 +1,6 @@
 MDB 5 React
 
-Version: FREE 6.3.0
+Version: FREE 7.0.0
 
 Documentation:
 https://mdbootstrap.com/docs/b5/react/

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-react-ui-kit-demo",
-  "version": "6.3.0",
+  "version": "7.0.0",
   "main": "index.js",
   "repository": {
     "type": "git",
@@ -16,7 +16,8 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-popper": "2.3.0",
-    "@popperjs/core": "2.11.5"
+    "@popperjs/core": "2.11.5",
+    "framer-motion": "^10.16.4"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

app/src/components/Accordion/Accordion.tsx → app/src/free/components/Accordion/Accordion.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import clsx from 'clsx';
 import React, { useMemo, useState } from 'react';
 import type { AccordionProps } from './types';
@@ -36,4 +38,5 @@ const MDBAccordion: React.FC<AccordionProps> = React.forwardRef<HTMLAllCollectio
   }
 );
 
+MDBAccordion.displayName = 'MDBAccordion';
 export default MDBAccordion;

app/src/components/Accordion/AccordionContext.tsx → app/src/free/components/Accordion/AccordionContext.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 interface AccordionProps {

app/src/components/Accordion/AccordionItem/AccordionItem.tsx → app/src/free/components/Accordion/AccordionItem/AccordionItem.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import clsx from 'clsx';
 import React, { useContext, useMemo, useCallback } from 'react';
 import { AccordionContext } from '../AccordionContext';
@@ -65,7 +67,7 @@ const MDBAccordionItem: React.FC<AccordionItemProps> = React.forwardRef<HTMLAllC
             {headerTitle}
           </button>
         </h2>
-        <MDBCollapse id={collapseId.toString()} show={isCollapsed}>
+        <MDBCollapse id={collapseId.toString()} open={isCollapsed}>
           <div className={bodyClasses} style={bodyStyle}>
             {children}
           </div>
@@ -75,4 +77,5 @@ const MDBAccordionItem: React.FC<AccordionItemProps> = React.forwardRef<HTMLAllC
   }
 );
 
+MDBAccordionItem.displayName = 'MDBAccordionItem';
 export default MDBAccordionItem;

app/src/components/Accordion/AccordionItem/types.tsx → app/src/free/components/Accordion/AccordionItem/types.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseComponent } from '../../../types/baseComponent';
+import { BaseComponent } from '../../../../types/baseComponent';
 
 interface AccordionItemProps extends BaseComponent {
   bodyClassName?: string;
@@ -13,4 +13,4 @@ interface AccordionItemProps extends BaseComponent {
   tag?: React.ComponentProps<any>;
 }
 
-export { AccordionItemProps };
+export type { AccordionItemProps };

app/src/components/Accordion/types.tsx → app/src/free/components/Accordion/types.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseComponent } from '../../types/baseComponent';
+import { BaseComponent } from '../../../types/baseComponent';
 
 interface AccordionProps extends BaseComponent {
   alwaysOpen?: boolean;
@@ -12,4 +12,4 @@ interface AccordionProps extends BaseComponent {
   tag?: React.ComponentProps<any>;
 }
 
-export { AccordionProps };
+export type { AccordionProps };

app/src/components/Badge/Badge.tsx → app/src/free/components/Badge/Badge.tsx

@@ -21,4 +21,5 @@ const MDBBadge: React.FC<BadgeProps> = React.forwardRef<HTMLAllCollection, Badge
   }
 );
 
+MDBBadge.displayName = 'MDBBadge';
 export default MDBBadge;

app/src/components/Badge/types.tsx → app/src/free/components/Badge/types.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { BaseComponent } from '../../types/baseComponent';
-import { backgroundColor } from '../../types/colors';
+import { BaseComponent } from '../../../types/baseComponent';
+import { backgroundColor } from '../../../types/colors';
 
 interface BadgeProps extends BaseComponent {
   color?: backgroundColor;
@@ -11,4 +11,4 @@ interface BadgeProps extends BaseComponent {
   tag?: React.ComponentProps<any>;
 }
 
-export { BadgeProps };
+export type { BadgeProps };

app/src/components/Button/Button.tsx → app/src/free/components/Button/Button.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useState } from 'react';
 import clsx from 'clsx';
 import type { ButtonProps } from './types';
@@ -104,4 +106,5 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
   }
 );
 
+MDBBtn.displayName = 'MDBBtn';
 export default MDBBtn;

app/src/components/Button/types.tsx → app/src/free/components/Button/types.tsx

@@ -37,4 +37,4 @@ interface ButtonProps extends Omit<joinedTypes, 'size' | 'color'> {
   to?: string;
 }
 
-export { ButtonProps };
+export type { ButtonProps };

app/src/components/ButtonGroup/ButtonGroup.tsx → app/src/free/components/ButtonGroup/ButtonGroup.tsx

@@ -23,4 +23,5 @@ const MDBBtnGroup: React.FC<ButtonGroupProps> = React.forwardRef<HTMLAllCollecti
   }
 );
 
+MDBBtnGroup.displayName = 'MDBBtnGroup';
 export default MDBBtnGroup;

app/src/components/ButtonGroup/types.tsx → app/src/free/components/ButtonGroup/types.tsx

@@ -1,5 +1,5 @@
-import { BaseComponent } from '../../types/baseComponent';
-import { size } from '../../types/size';
+import { BaseComponent } from '../../../types/baseComponent';
+import { size } from '../../../types/size';
 
 interface ButtonGroupProps extends BaseComponent {
   ref?: React.ForwardedRef<HTMLAllCollection>;
@@ -10,4 +10,4 @@ interface ButtonGroupProps extends BaseComponent {
   tag?: React.ComponentProps<any>;
 }
 
-export { ButtonGroupProps };
+export type { ButtonGroupProps };

app/src/components/Card/Card.tsx → app/src/free/components/Card/Card.tsx

@@ -21,4 +21,5 @@ const MDBCard: React.FC<CardProps> = React.forwardRef<HTMLAllCollection, CardPro
   }
 );
 
+MDBCard.displayName = 'MDBCard';
 export default MDBCard;

app/src/components/Card/CardBody/CardBody.tsx → app/src/free/components/Card/CardBody/CardBody.tsx

@@ -14,4 +14,5 @@ const MDBCardBody: React.FC<CardBodyProps> = React.forwardRef<HTMLAllCollection,
   }
 );
 
+MDBCardBody.displayName = 'MDBCardBody';
 export default MDBCardBody;

app/src/components/Card/CardBody/types.tsx → app/src/free/components/Card/CardBody/types.tsx

@@ -1,8 +1,8 @@
-import { BaseComponent } from '../../../types/baseComponent';
+import { BaseComponent } from '../../../../types/baseComponent';
 
 interface CardBodyProps extends BaseComponent {
   tag?: React.ComponentProps<any>;
   ref?: React.ForwardedRef<HTMLAllCollection>;
 }
 
-export { CardBodyProps };
+export type { CardBodyProps };

app/src/components/Card/CardFooter/CardFooter.tsx → app/src/free/components/Card/CardFooter/CardFooter.tsx

@@ -14,4 +14,5 @@ const MDBCardFooter: React.FC<CardFooterProps> = React.forwardRef<HTMLAllCollect
   }
 );
 
+MDBCardFooter.displayName = 'MDBCardFooter';
 export default MDBCardFooter;

app/src/free/components/Card/CardFooter/types.tsx

@@ -0,0 +1,11 @@
+import { BaseComponent } from '../../../../types/baseComponent';
+import { backgroundColor } from '../../../../types/colors';
+
+interface CardFooterProps extends BaseComponent {
+  border?: string;
+  background?: backgroundColor;
+  ref?: React.ForwardedRef<HTMLAllCollection>;
+  tag?: React.ComponentProps<any>;
+}
+
+export type { CardFooterProps };

app/src/components/Card/CardGroup/CardGroup.tsx → app/src/free/components/Card/CardGroup/CardGroup.tsx

@@ -14,4 +14,5 @@ const MDBCardGroup: React.FC<CardGroupProps> = React.forwardRef<HTMLAllCollectio
   }
 );
 
+MDBCardGroup.displayName = 'MDBCardGroup';
 export default MDBCardGroup;

app/src/components/Card/CardGroup/types.tsx → app/src/free/components/Card/CardGroup/types.tsx

@@ -1,8 +1,8 @@
-import { BaseComponent } from '../../../types/baseComponent';
+import { BaseComponent } from '../../../../types/baseComponent';
 
 interface CardGroupProps extends BaseComponent {
   tag?: React.ComponentProps<any>;
   ref?: React.ForwardedRef<HTMLAllCollection>;
 }
 
-export { CardGroupProps };
+export type { CardGroupProps };

app/src/components/Card/CardHeader/CardHeader.tsx → app/src/free/components/Card/CardHeader/CardHeader.tsx

@@ -14,4 +14,5 @@ const MDBCardHeader: React.FC<CardHeaderProps> = React.forwardRef<HTMLAllCollect
   }
 );
 
+MDBCardHeader.displayName = 'MDBCardHeader';
 export default MDBCardHeader;

app/src/components/Card/CardHeader/types.tsx → app/src/free/components/Card/CardHeader/types.tsx

@@ -1,5 +1,5 @@
-import { BaseComponent } from '../../../types/baseComponent';
-import { backgroundColor } from '../../../types/colors';
+import { BaseComponent } from '../../../../types/baseComponent';
+import { backgroundColor } from '../../../../types/colors';
 
 interface CardHeaderProps extends BaseComponent {
   border?: string;
@@ -8,4 +8,4 @@ interface CardHeaderProps extends BaseComponent {
   tag?: React.ComponentProps<any>;
 }
 
-export { CardHeaderProps };
+export type { CardHeaderProps };

app/src/components/Card/CardImage/types.tsx → app/src/free/components/Card/CardImage/types.tsx

@@ -4,4 +4,4 @@ interface CardImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
   fluid?: boolean;
 }
 
-export { CardImageProps };
+export type { CardImageProps };

app/src/components/Card/CardLink/types.tsx → app/src/free/components/Card/CardLink/types.tsx

@@ -1,3 +1,3 @@
 type CardLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
 
-export { CardLinkProps };
+export type { CardLinkProps };

app/src/components/Card/CardOverlay/CardOverlay.tsx → app/src/free/components/Card/CardOverlay/CardOverlay.tsx

@@ -14,4 +14,5 @@ const MDBCardOverlay: React.FC<CardOverlayProps> = React.forwardRef<HTMLAllColle
   }
 );
 
+MDBCardOverlay.displayName = 'MDBCardOverlay';
 export default MDBCardOverlay;

app/src/components/Card/CardOverlay/types.tsx → app/src/free/components/Card/CardOverlay/types.tsx

@@ -1,8 +1,8 @@
-import { BaseComponent } from '../../../types/baseComponent';
+import { BaseComponent } from '../../../../types/baseComponent';
 
 interface CardOverlayProps extends BaseComponent {
   tag?: React.ComponentProps<any>;
   ref?: React.ForwardedRef<HTMLAllCollection>;
 }
 
-export { CardOverlayProps };
+export type { CardOverlayProps };

app/src/components/Card/CardSubTitle/CardSubTitle.tsx → app/src/free/components/Card/CardSubTitle/CardSubTitle.tsx

@@ -14,4 +14,5 @@ const MDBCardSubTitle: React.FC<CardSubTitleProps> = React.forwardRef<HTMLAllCol
   }
 );
 
+MDBCardSubTitle.displayName = 'MDBCardSubTitle';
 export default MDBCardSubTitle;

app/src/components/Card/CardSubTitle/types.tsx → app/src/free/components/Card/CardSubTitle/types.tsx

@@ -1,8 +1,8 @@
-import { BaseComponent } from '../../../types/baseComponent';
+import { BaseComponent } from '../../../../types/baseComponent';
 
 interface CardSubTitleProps extends BaseComponent {
   tag?: React.ComponentProps<any>;
   ref?: React.ForwardedRef<HTMLAllCollection>;
 }
 
-export { CardSubTitleProps };
+export type { CardSubTitleProps };

app/src/components/Card/CardText/CardText.tsx → app/src/free/components/Card/CardText/CardText.tsx

@@ -14,4 +14,5 @@ const MDBCardText: React.FC<CardTextProps> = React.forwardRef<HTMLAllCollection,
   }
 );
 
+MDBCardText.displayName = 'MDBCardText';
 export default MDBCardText;

app/src/components/Card/CardText/types.tsx → app/src/free/components/Card/CardText/types.tsx

@@ -1,8 +1,8 @@
-import { BaseComponent } from '../../../types/baseComponent';
+import { BaseComponent } from '../../../../types/baseComponent';
 
 interface CardTextProps extends BaseComponent {
   tag?: React.ComponentProps<any>;
   ref?: React.ForwardedRef<HTMLAllCollection>;
 }
 
-export { CardTextProps };
+export type { CardTextProps };

app/src/components/Card/CardTitle/CardTitle.tsx → app/src/free/components/Card/CardTitle/CardTitle.tsx

@@ -14,4 +14,5 @@ const MDBCardTitle: React.FC<CardTitleProps> = React.forwardRef<HTMLAllCollectio
   }
 );
 
+MDBCardTitle.displayName = 'MDBCardTitle';
 export default MDBCardTitle;

app/src/components/Card/CardTitle/types.tsx → app/src/free/components/Card/CardTitle/types.tsx

@@ -1,8 +1,8 @@
-import { BaseComponent } from '../../../types/baseComponent';
+import { BaseComponent } from '../../../../types/baseComponent';
 
 interface CardTitleProps extends BaseComponent {
   tag?: React.ComponentProps<any>;
   ref?: React.ForwardedRef<HTMLAllCollection>;
 }
 
-export { CardTitleProps };
+export type { CardTitleProps };

app/src/components/Card/CardFooter/types.tsx → app/src/free/components/Card/types.tsx

@@ -1,11 +1,13 @@
-import { BaseComponent } from '../../../types/baseComponent';
 import { backgroundColor } from '../../../types/colors';
+import { BaseComponent } from '../../../types/baseComponent';
 
-interface CardFooterProps extends BaseComponent {
+interface CardProps extends BaseComponent {
+  alignment?: string;
   border?: string;
   background?: backgroundColor;
+  shadow?: '0' | '1' | '2' | '3' | '4' | '5';
   ref?: React.ForwardedRef<HTMLAllCollection>;
   tag?: React.ComponentProps<any>;
 }
 
-export { CardFooterProps };
+export type { CardProps };

app/src/components/Carousel/Carousel.tsx → app/src/free/components/Carousel/Carousel.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import clsx from 'clsx';
 import React, { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
 import type { CarouselProps } from './types';

app/src/free/components/Carousel/CarouselCaption/CarouselCaption.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CarouselCaptionProps } from './types';
+import clsx from 'clsx';
+
+const MDBCarouselCaption: React.FC<CarouselCaptionProps> = ({ className, children, ...props }) => {
+  const classes = clsx('carousel-caption d-none d-md-block', className);
+
+  return (
+    <div className={classes} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export default MDBCarouselCaption;

app/src/free/components/Carousel/CarouselCaption/types.tsx

@@ -0,0 +1,8 @@
+import { BaseComponent } from 'src/types/baseComponent';
+
+type CarouselCaptionProps = BaseComponent & {
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export { CarouselCaptionProps };

app/src/components/Carousel/CarouselControls/types.tsx → app/src/free/components/Carousel/CarouselControls/types.tsx

@@ -2,4 +2,4 @@ type CarouselControlsProps = {
   move: (direction: 'prev' | 'next') => void;
 };
 
-export { CarouselControlsProps };
+export type { CarouselControlsProps };