feat(root): RSC components added, packages modified, filter dom props function adapted

.changeset/fresh-jobs-draw.md

@@ -0,0 +1,22 @@
+---
+"@nextui-org/react-utils": patch
+"@nextui-org/accordion": patch
+"@nextui-org/dropdown": patch
+"@nextui-org/skeleton": patch
+"@nextui-org/divider": patch
+"@nextui-org/spinner": patch
+"@nextui-org/button": patch
+"@nextui-org/spacer": patch
+"@nextui-org/badge": patch
+"@nextui-org/input": patch
+"@nextui-org/table": patch
+"@nextui-org/card": patch
+"@nextui-org/code": patch
+"@nextui-org/tabs": patch
+"@nextui-org/kbd": patch
+"@nextui-org/system": patch
+---
+
+- "use client" directive removed from components that didn't need it
+- packages adapted to support RSC imports
+- filterDomProps function was modified to enable/disabled it

apps/docs/app/page.tsx

@@ -1,4 +1,4 @@
-import {Spacer} from "@nextui-org/react";
+import {Spacer} from "@nextui-org/spacer";
 
 import {Hero} from "@/components/marketing/hero";
 import {FeaturesGrid} from "@/components/marketing/features-grid";

apps/docs/components/blog-post.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import {BlogPost} from "contentlayer/generated";
-import {Card, CardFooter, CardBody, CardHeader, Link, Avatar} from "@nextui-org/react";
+import {Card, CardFooter, CardBody, CardHeader, Link, Avatar, Image} from "@nextui-org/react";
 import Balancer from "react-wrap-balancer";
 import {format, parseISO} from "date-fns";
 import NextLink from "next/link";
@@ -39,10 +39,9 @@ const BlogPostCard = (post: BlogPost) => {
                 <Balancer>{post.title}</Balancer>
               </Link>
             </CardHeader>
-            <CardBody className="px-3 pt-0 pb-1">
-              <p className="font-normal text-default-600">
-                <Balancer>{post.description}</Balancer>
-              </p>
+            <CardBody className="pt-0 px-2 pb-1">
+              <Image className="mb-3" src={post.image} />
+              <p className="font-normal px-1 text-default-600">{post.description}</p>
             </CardBody>
             <CardFooter className="flex justify-between items-center">
               <time className="block text-small text-default-500" dateTime={post.date}>

apps/docs/components/docs/components/component-links.tsx

@@ -1,40 +1,56 @@
-import {Button, ButtonProps, Link} from "@nextui-org/react";
+import {Button, ButtonProps, Code, Link, Tooltip} from "@nextui-org/react";
+import {ReactNode} from "react";
+import Balancer from "react-wrap-balancer";
 
-import {GithubIcon, NpmIcon, AdobeIcon, StorybookIcon} from "@/components/icons";
+import {GithubIcon, NpmIcon, AdobeIcon, StorybookIcon, NextJsIcon} from "@/components/icons";
 import {COMPONENT_PATH, COMPONENT_THEME_PATH} from "@/libs/github/constants";
 
 export interface ComponentLinksProps {
   component: string;
   styles?: string;
   storybook?: string;
+  rscCompatible?: boolean;
   reactAriaHook?: string;
 }
 
 const ButtonLink = ({
   children,
   href,
   startContent,
+  tooltip,
   ...props
 }: ButtonProps & {
   href: string;
-}) => (
-  <Button
-    isExternal
-    as={Link}
-    className="!text-small py-4 bg-default-100 dark:bg-default-50 text-default-700"
-    href={href}
-    size="sm"
-    startContent={startContent}
-    {...props}
-  >
-    {children}
-  </Button>
-);
+  tooltip?: string | ReactNode;
+}) => {
+  const button = (
+    <Button
+      isExternal
+      as={Link}
+      className="!text-small py-4 bg-default-100 dark:bg-default-50 text-default-700"
+      href={href}
+      size="sm"
+      startContent={startContent}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+
+  return tooltip ? (
+    <Tooltip className="max-w-[230px]" content={tooltip}>
+      {button}
+    </Tooltip>
+  ) : (
+    button
+  );
+};
 
 export const ComponentLinks = ({
   component,
   storybook,
   styles,
+  rscCompatible,
   reactAriaHook,
 }: ComponentLinksProps) => {
   if (!component) {
@@ -63,6 +79,26 @@ export const ComponentLinks = ({
           React Aria
         </ButtonLink>
       )}
+      {rscCompatible && (
+        <ButtonLink
+          href="https://nextjs.org/docs/getting-started/react-essentials#server-components"
+          startContent={<NextJsIcon size={18} />}
+          tooltip={
+            <p>
+              <Balancer>
+                This component doesn&apos;t use the
+                <Code className="font-normal bg-transparent px-0 py-0 text-code-mdx">
+                  `use client;`
+                </Code>
+                directive making it compatible with RSC.
+              </Balancer>
+            </p>
+          }
+        >
+          Server component
+        </ButtonLink>
+      )}
+
       <ButtonLink href={`${COMPONENT_PATH}/${component}`} startContent={<GithubIcon size={20} />}>
         Source
       </ButtonLink>

apps/docs/components/sandpack/theme.ts

@@ -30,8 +30,7 @@ export const nextuiTheme: SandpackTheme = {
   },
   font: {
     body: "Inter var",
-    mono:
-      'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
     size: "14px",
     lineHeight: "1.5rem",
   },

apps/docs/content/docs/components/badge.mdx

@@ -9,7 +9,7 @@ import {badgeContent} from "@/content/components/badge";
 
 Badges are used as a small numerical value or status descriptor for UI elements.
 
-<ComponentLinks component="badge" />
+<ComponentLinks component="badge" rscCompatible />
 
 ---
 

apps/docs/content/docs/components/code.mdx

@@ -9,7 +9,7 @@ import {codeContent} from "@/content/components/code";
 
 Code is a component used to display inline code.
 
-<ComponentLinks component="code" />
+<ComponentLinks component="code" rscCompatible />
 
 ---
 

apps/docs/content/docs/components/divider.mdx

@@ -9,7 +9,7 @@ import {dividerContent} from "@/content/components/divider";
 
 Divider is a component that separates content in a page.
 
-<ComponentLinks component="divider" reactAriaHook="useSeparator" />
+<ComponentLinks component="divider" reactAriaHook="useSeparator" rscCompatible />
 
 ---
 

apps/docs/content/docs/components/kbd.mdx

@@ -9,7 +9,7 @@ import {kbdContent} from "@/content/components/kbd";
 
 Keyboard key is a component to display which key or combination of keys performs a given action.
 
-<ComponentLinks component="kbd" />
+<ComponentLinks component="kbd" rscCompatible />
 
 ---
 

apps/docs/content/docs/components/skeleton.mdx

@@ -9,7 +9,7 @@ import {skeletonContent} from "@/content/components/skeleton";
 
 Skeleton is a placeholder to show a loading state and the expected shape of a component.
 
-<ComponentLinks component="skeleton" />
+<ComponentLinks component="skeleton" rscCompatible />
 
 ---
 

apps/docs/content/docs/components/spacer.mdx

@@ -9,7 +9,7 @@ import {spacerContent} from "@/content/components/spacer";
 
 Spacer is a component used to add space between components.
 
-<ComponentLinks component="spacer" />
+<ComponentLinks component="spacer" rscCompatible />
 
 ---
 

apps/docs/content/docs/components/spinner.mdx

@@ -9,7 +9,7 @@ import {spinnerContent} from "@/content/components/spinner";
 
 Spinner express an unspecified wait time or display the length of a process.
 
-<ComponentLinks component="spinner" />
+<ComponentLinks component="spinner" rscCompatible />
 
 ---
 

apps/docs/package.json

@@ -22,6 +22,13 @@
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/theme": "workspace:*",
+    "@nextui-org/spacer": "workspace:*",
+    "@nextui-org/kbd": "workspace:*",
+    "@nextui-org/code": "workspace:*",
+    "@nextui-org/badge": "workspace:*",
+    "@nextui-org/skeleton": "workspace:*",
+    "@nextui-org/spinner": "workspace:*",
+    "@nextui-org/divider": "workspace:*",
     "@nextui-org/use-clipboard": "workspace:*",
     "@nextui-org/use-infinite-scroll": "workspace:*",
     "@nextui-org/use-is-mobile": "workspace:*",

packages/components/accordion/src/use-accordion-item.ts

@@ -67,6 +67,7 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
   } = props;
 
   const Component = as || "div";
+  const shouldFilterDOMProps = typeof Component === "string";
 
   const domRef = useDOMRef<HTMLButtonElement>(ref);
 
@@ -132,10 +133,15 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
         "data-open": dataAttr(isOpen),
         "data-disabled": dataAttr(isDisabled),
         className: slots.base({class: baseStyles}),
-        ...mergeProps(filterDOMProps(otherProps), props),
+        ...mergeProps(
+          filterDOMProps(otherProps, {
+            enabled: shouldFilterDOMProps,
+          }),
+          props,
+        ),
       };
     },
-    [baseStyles, otherProps, slots, item.props, isOpen, isDisabled],
+    [baseStyles, shouldFilterDOMProps, otherProps, slots, item.props, isOpen, isDisabled],
   );
 
   const getButtonProps: PropGetter = (props = {}) => {

packages/components/badge/src/badge.tsx

@@ -1,6 +1,6 @@
 import type {ReactNode} from "react";
 
-import {forwardRef} from "@nextui-org/system";
+import {forwardRef} from "@nextui-org/system/utils";
 
 import {UseBadgeProps, useBadge} from "./use-badge";
 
@@ -11,13 +11,14 @@ export interface BadgeProps extends UseBadgeProps {
 const Badge = forwardRef<"span", BadgeProps>((props, ref) => {
   const {Component, children, content, slots, classNames, getBadgeProps} = useBadge({
     ...props,
-    ref,
   });
 
   return (
     <div className={slots.base({class: classNames?.base})}>
       {children}
-      <Component {...getBadgeProps()}>{content}</Component>
+      <Component ref={ref} {...getBadgeProps()}>
+        {content}
+      </Component>
     </div>
   );
 });

packages/components/badge/src/use-badge.ts

@@ -2,8 +2,8 @@ import type {BadgeSlots, BadgeVariantProps, SlotsToClasses} from "@nextui-org/th
 import type {ReactNode} from "react";
 
 import {badge} from "@nextui-org/theme";
-import {HTMLNextUIProps, mapPropsVariants, PropGetter} from "@nextui-org/system";
-import {useDOMRef} from "@nextui-org/react-utils";
+import {HTMLNextUIProps, PropGetter} from "@nextui-org/system/types";
+import {mapPropsVariants} from "@nextui-org/system/utils";
 import {clsx} from "@nextui-org/shared-utils";
 import {ReactRef} from "@nextui-org/react-utils";
 import {useMemo} from "react";
@@ -41,12 +41,10 @@ export type UseBadgeProps = Props & BadgeVariantProps;
 export function useBadge(originalProps: UseBadgeProps) {
   const [props, variantProps] = mapPropsVariants(originalProps, badge.variantKeys);
 
-  const {as, ref, children, className, content, classNames, ...otherProps} = props;
+  const {as, children, className, content, classNames, ...otherProps} = props;
 
   const Component = as || "span";
 
-  const domRef = useDOMRef(ref);
-
   const isOneChar = useMemo(
     () => String(content)?.length === 1 || originalProps?.isOneChar,
     [content, originalProps?.isOneChar],
@@ -68,7 +66,6 @@ export function useBadge(originalProps: UseBadgeProps) {
 
   const getBadgeProps: PropGetter = () => {
     return {
-      ref: domRef,
       className: slots.badge({class: baseStyles}),
       "data-invisible": originalProps.isInvisible,
       ...otherProps,

packages/components/badge/tsup.config.ts

@@ -4,5 +4,4 @@ export default defineConfig({
   clean: true,
   target: "es2019",
   format: ["cjs", "esm"],
-  banner: {js: '"use client";'},
 });

packages/components/button/src/use-button.ts

@@ -92,6 +92,7 @@ export function useButton(props: UseButtonProps) {
   } = props;
 
   const Component = as || "button";
+  const shouldFilterDOMProps = typeof Component === "string";
 
   const domRef = useDOMRef(ref);
 
@@ -164,7 +165,9 @@ export function useButton(props: UseButtonProps) {
         ariaButtonProps,
         focusProps,
         hoverProps,
-        filterDOMProps(otherProps),
+        filterDOMProps(otherProps, {
+          enabled: shouldFilterDOMProps,
+        }),
         filterDOMProps(props),
       ),
     }),
@@ -173,6 +176,7 @@ export function useButton(props: UseButtonProps) {
       isDisabled,
       isFocused,
       isPressed,
+      shouldFilterDOMProps,
       isFocusVisible,
       isHovered,
       ariaButtonProps,

packages/components/card/src/use-card.ts

@@ -81,6 +81,7 @@ export function useCard(originalProps: UseCardProps) {
 
   const domRef = useDOMRef<HTMLDivElement>(ref);
   const Component = as || (originalProps.isPressable ? "button" : "div");
+  const shouldFilterDOMProps = typeof Component === "string";
 
   const baseStyles = clsx(classNames?.base, className);
 
@@ -154,7 +155,9 @@ export function useCard(originalProps: UseCardProps) {
         ...mergeProps(
           originalProps.isPressable ? {...buttonProps, ...focusProps, role: "button"} : {},
           originalProps.isHoverable ? hoverProps : {},
-          filterDOMProps(otherProps),
+          filterDOMProps(otherProps, {
+            enabled: shouldFilterDOMProps,
+          }),
           filterDOMProps(props),
         ),
       };
@@ -163,6 +166,7 @@ export function useCard(originalProps: UseCardProps) {
       domRef,
       slots,
       baseStyles,
+      shouldFilterDOMProps,
       originalProps.isPressable,
       originalProps.isHoverable,
       originalProps.isDisabled,