fix(docs): button custom implementation

.changeset/honest-yaks-attack.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/react": patch
+---
+
+Ripple component added to @nextui-org/react exports

apps/docs/content/components/button/custom-impl.ts

@@ -1,13 +1,12 @@
 const App = `import {forwardRef} from "react";
+import {useButton, Ripple, Spinner} from "@nextui-org/react";
 
-import {useButton, Drip, Spinner} from "@nextui-org/react";
 
 const MyButton = forwardRef((props, ref) => {
   const {
     domRef,
     children,
-    classNames,
-    drips,
+    ripples,
     spinnerSize,
     spinner = <Spinner color="current" size={spinnerSize} />,
     spinnerPlacement,
@@ -22,13 +21,13 @@ const MyButton = forwardRef((props, ref) => {
   });
 
   return (
-    <button ref={domRef} className={classNames} {...getButtonProps()}>
+    <button ref={domRef} {...getButtonProps()}>
       {startContent}
       {isLoading && spinnerPlacement === "start" && spinner}
       {children}
       {isLoading && spinnerPlacement === "end" && spinner}
       {endContent}
-      {!disableRipple && <Drip drips={drips} />}
+      {!disableRipple && <Ripple ripples={ripples} />}
     </button>
   );
 });
@@ -38,17 +37,15 @@ MyButton.displayName = "MyButton";
 export default MyButton;`;
 
 const AppTs = `import {forwardRef} from "react";
-
-import {useButton, Drip, Spinner, ButtonProps as BaseButtonProps} from "@nextui-org/react";
+import {useButton, Ripple, Spinner, ButtonProps as BaseButtonProps} from "@nextui-org/react";
 
 export interface ButtonProps extends BaseButtonProps {}
 
 const MyButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     domRef,
     children,
-    classNames,
-    drips,
+    ripples,
     spinnerSize,
     spinner = <Spinner color="current" size={spinnerSize} />,
     spinnerPlacement,
@@ -63,13 +60,13 @@ const MyButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   });
 
   return (
-    <button ref={domRef} className={classNames} {...getButtonProps()}>
+    <button ref={domRef} {...getButtonProps()}>
       {startContent}
       {isLoading && spinnerPlacement === "start" && spinner}
       {children}
       {isLoading && spinnerPlacement === "end" && spinner}
       {endContent}
-      {!disableRipple && <Drip drips={drips} />}
+      {!disableRipple && <Ripple ripples={ripples} />}
     </button>
   );
 });

packages/core/react/package.json

@@ -76,6 +76,7 @@
     "@nextui-org/select": "workspace:*",
     "@nextui-org/listbox": "workspace:*",
     "@nextui-org/menu": "workspace:*",
+    "@nextui-org/ripple": "workspace:*",
     "@react-aria/visually-hidden": "^3.8.4"
   },
   "peerDependencies": {

packages/core/react/src/index.ts

@@ -37,6 +37,7 @@ export * from "@nextui-org/scroll-shadow";
 export * from "@nextui-org/select";
 export * from "@nextui-org/listbox";
 export * from "@nextui-org/menu";
+export * from "@nextui-org/ripple";
 
 /**
  * React Aria - Exports