feat(carousel-item): add prop type-checking for the interval prop

Adds the proper prop type-check for the `interval` prop, improving
overall developer experience.

Also comes with a new export to be able to extend from the
`CarouselItemProps` interface, so that our end-users (developers)
who are using TS can properly type-check their encapsulated
components.

Author: bpas247

src/CarouselItem.tsx

@@ -1,3 +1,54 @@
-import createWithBsPrefix from './createWithBsPrefix';
+import classNames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useBootstrapPrefix } from './ThemeProvider';
+import {
+  BsPrefixPropsWithChildren,
+  BsPrefixRefForwardingComponent,
+} from './helpers';
 
-export default createWithBsPrefix('carousel-item');
+export interface CarouselItemProps extends BsPrefixPropsWithChildren {
+  interval?: number;
+}
+
+type CarouselItem = BsPrefixRefForwardingComponent<'div', CarouselItemProps>;
+
+const propTypes = {
+  /** Set a custom element for this component */
+  as: PropTypes.elementType,
+
+  /** @default 'carousel-item' */
+  bsPrefix: PropTypes.string,
+
+  /** The amount of time to delay between automatically cycling this specific item. Will default to the Carousel's `interval` prop value if none is specified. */
+  interval: PropTypes.number,
+};
+
+const CarouselItem = (React.forwardRef(
+  (
+    {
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'div',
+      bsPrefix,
+      children,
+      className,
+      ...props
+    }: CarouselItemProps,
+    ref,
+  ) => {
+    const finalClassName = classNames(
+      className,
+      useBootstrapPrefix(bsPrefix, 'carousel-item'),
+    );
+    return (
+      <Component ref={ref} {...props} className={finalClassName}>
+        {children}
+      </Component>
+    );
+  },
+) as unknown) as CarouselItem;
+
+CarouselItem.displayName = 'CarouselItem';
+CarouselItem.propTypes = propTypes;
+
+export default CarouselItem;

src/index.tsx

@@ -46,6 +46,8 @@ export { default as Carousel } from './Carousel';
 export type { CarouselProps } from './Carousel';
 
 export { default as CarouselItem } from './CarouselItem';
+export type { CarouselItemProps } from './CarouselItem';
+
 export { default as CloseButton } from './CloseButton';
 export type { CloseButtonProps } from './CloseButton';