fix: fix RSC error with createWithBsPrefix components

src/Alert.tsx

@@ -4,13 +4,12 @@ import PropTypes from 'prop-types';
 import { elementType } from 'prop-types-extra';
 import { useUncontrolled } from 'uncontrollable';
 import useEventCallback from '@restart/hooks/useEventCallback';
-import Anchor from '@restart/ui/Anchor';
 import { useBootstrapPrefix } from './ThemeProvider';
+import AlertHeading from './AlertHeading';
+import AlertLink from './AlertLink';
 import Fade from './Fade';
 import CloseButton, { CloseButtonVariant } from './CloseButton';
 import { Variant } from './types';
-import divWithClassName from './divWithClassName';
-import createWithBsPrefix from './createWithBsPrefix';
 import { TransitionType } from './helpers';
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -24,17 +23,6 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   transition?: TransitionType;
 }
 
-const DivStyledAsH4 = divWithClassName('h4');
-DivStyledAsH4.displayName = 'DivStyledAsH4';
-
-const AlertHeading = createWithBsPrefix('alert-heading', {
-  Component: DivStyledAsH4,
-});
-
-const AlertLink = createWithBsPrefix('alert-link', {
-  Component: Anchor,
-});
-
 const propTypes = {
   /**
    * @default 'alert'

src/AlertHeading.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import divWithClassName from './divWithClassName';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+const DivStyledAsH4 = divWithClassName('h4');
+DivStyledAsH4.displayName = 'DivStyledAsH4';
+
+export interface AlertHeadingProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const AlertHeading: BsPrefixRefForwardingComponent<'div', AlertHeadingProps> =
+  React.forwardRef<HTMLElement, AlertHeadingProps>(
+    ({ className, bsPrefix, as: Component = DivStyledAsH4, ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'alert-heading');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  );
+
+AlertHeading.displayName = 'AlertHeading';
+
+export default AlertHeading;

src/AlertLink.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import Anchor from '@restart/ui/Anchor';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface AlertLinkProps
+  extends BsPrefixProps,
+    React.AnchorHTMLAttributes<HTMLElement> {}
+
+const AlertLink: BsPrefixRefForwardingComponent<'a', AlertLinkProps> =
+  React.forwardRef<HTMLElement, AlertLinkProps>(
+    ({ className, bsPrefix, as: Component = Anchor, ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'alert-link');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  );
+
+AlertLink.displayName = 'AlertLink';
+
+export default AlertLink;

src/Card.tsx

@@ -3,27 +3,18 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 
 import { useBootstrapPrefix } from './ThemeProvider';
-import createWithBsPrefix from './createWithBsPrefix';
-import divWithClassName from './divWithClassName';
-import CardImg from './CardImg';
+import CardBody from './CardBody';
+import CardFooter from './CardFooter';
 import CardHeader from './CardHeader';
+import CardImg from './CardImg';
+import CardImgOverlay from './CardImgOverlay';
+import CardLink from './CardLink';
+import CardSubtitle from './CardSubtitle';
+import CardText from './CardText';
+import CardTitle from './CardTitle';
 import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 import { Color, Variant } from './types';
 
-const DivStyledAsH5 = divWithClassName('h5');
-const DivStyledAsH6 = divWithClassName('h6');
-const CardBody = createWithBsPrefix('card-body');
-const CardTitle = createWithBsPrefix('card-title', {
-  Component: DivStyledAsH5,
-});
-const CardSubtitle = createWithBsPrefix('card-subtitle', {
-  Component: DivStyledAsH6,
-});
-const CardLink = createWithBsPrefix('card-link', { Component: 'a' });
-const CardText = createWithBsPrefix('card-text', { Component: 'p' });
-const CardFooter = createWithBsPrefix('card-footer');
-const CardImgOverlay = createWithBsPrefix('card-img-overlay');
-
 export interface CardProps
   extends BsPrefixProps,
     React.HTMLAttributes<HTMLElement> {

src/CardBody.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface CardBodyProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const CardBody: BsPrefixRefForwardingComponent<'div', CardBodyProps> =
+  React.forwardRef<HTMLElement, CardBodyProps>(
+    ({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'card-body');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  );
+
+CardBody.displayName = 'CardBody';
+
+export default CardBody;

src/CardFooter.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface CardFooterProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const CardFooter: BsPrefixRefForwardingComponent<'div', CardFooterProps> =
+  React.forwardRef<HTMLElement, CardFooterProps>(
+    ({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'card-footer');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  );
+
+CardFooter.displayName = 'CardFooter';
+
+export default CardFooter;

src/CardGroup.tsx

@@ -1,3 +1,26 @@
-import createWithBsPrefix from './createWithBsPrefix';
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 
-export default createWithBsPrefix('card-group');
+export interface CardGroupProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const CardGroup: BsPrefixRefForwardingComponent<'div', CardGroupProps> =
+  React.forwardRef<HTMLElement, CardGroupProps>(
+    ({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'card-group');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  );
+
+CardGroup.displayName = 'CardGroup';
+
+export default CardGroup;

src/CardImgOverlay.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface CardImgOverlayProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const CardImgOverlay: BsPrefixRefForwardingComponent<
+  'div',
+  CardImgOverlayProps
+> = React.forwardRef<HTMLElement, CardImgOverlayProps>(
+  ({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'card-img-overlay');
+    return (
+      <Component
+        ref={ref}
+        className={classNames(className, bsPrefix)}
+        {...props}
+      />
+    );
+  },
+);
+
+CardImgOverlay.displayName = 'CardImgOverlay';
+
+export default CardImgOverlay;

src/CardLink.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface CardLinkProps
+  extends BsPrefixProps,
+    React.AnchorHTMLAttributes<HTMLElement> {}
+
+const CardLink: BsPrefixRefForwardingComponent<'a', CardLinkProps> =
+  React.forwardRef<HTMLElement, CardLinkProps>(
+    ({ className, bsPrefix, as: Component = 'a', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'card-link');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  );
+
+CardLink.displayName = 'CardLink';
+
+export default CardLink;

src/CardSubtitle.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import divWithClassName from './divWithClassName';
+
+const DivStyledAsH6 = divWithClassName('h6');
+
+export interface CardSubtitleProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const CardSubtitle: BsPrefixRefForwardingComponent<'div', CardSubtitleProps> =
+  React.forwardRef<HTMLElement, CardSubtitleProps>(
+    ({ className, bsPrefix, as: Component = DivStyledAsH6, ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'card-subtitle');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  );
+
+CardSubtitle.displayName = 'CardSubtitle';
+
+export default CardSubtitle;

src/CardText.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface CardTextProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const CardText: BsPrefixRefForwardingComponent<'p', CardTextProps> =
+  React.forwardRef<HTMLElement, CardTextProps>(
+    ({ className, bsPrefix, as: Component = 'p', ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'card-text');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  );
+
+CardText.displayName = 'CardText';
+
+export default CardText;

src/CardTitle.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+import divWithClassName from './divWithClassName';
+
+const DivStyledAsH5 = divWithClassName('h5');
+
+export interface CardTitleProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const CardTitle: BsPrefixRefForwardingComponent<'div', CardTitleProps> =
+  React.forwardRef<HTMLElement, CardTitleProps>(
+    ({ className, bsPrefix, as: Component = DivStyledAsH5, ...props }, ref) => {
+      bsPrefix = useBootstrapPrefix(bsPrefix, 'card-title');
+      return (
+        <Component
+          ref={ref}
+          className={classNames(className, bsPrefix)}
+          {...props}
+        />
+      );
+    },
+  );
+
+CardTitle.displayName = 'CardTitle';
+
+export default CardTitle;

src/CarouselCaption.tsx

@@ -1,3 +1,28 @@
-import createWithBsPrefix from './createWithBsPrefix';
+import * as React from 'react';
+import classNames from 'classnames';
+import { useBootstrapPrefix } from './ThemeProvider';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 
-export default createWithBsPrefix('carousel-caption');
+export interface CarouselCaptionProps
+  extends BsPrefixProps,
+    React.HTMLAttributes<HTMLElement> {}
+
+const CarouselCaption: BsPrefixRefForwardingComponent<
+  'div',
+  CarouselCaptionProps
+> = React.forwardRef<HTMLElement, CarouselCaptionProps>(
+  ({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'carousel-caption');
+    return (
+      <Component
+        ref={ref}
+        className={classNames(className, bsPrefix)}
+        {...props}
+      />
+    );
+  },
+);
+
+CarouselCaption.displayName = 'CarouselCaption';
+
+export default CarouselCaption;