@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
32 lines • 1.31 kB
TypeScript
import { type HTMLMotionProps, type Transition } from "motion/react";
import * as React from "react";
/** Props accepted by {@link RippleButton}. */
export interface RippleButtonProps extends HTMLMotionProps<"button"> {
/** Button contents rendered above the ripple layer. @default undefined */
children: React.ReactNode;
/** Additional CSS classes merged with each generated ripple. @default undefined */
rippleClassName?: string;
/** Final expansion scale applied to each ripple animation. @default 10 */
scale?: number;
/** Motion timing used for each ripple animation. @default {duration: 0.6, ease: "easeOut"} */
transition?: Transition;
}
/**
* Renders a pressable button that emits animated ripples from the click position.
*
* @remarks
* - Animated component using the `motion` library
* - Renders a `<button>` element
* - Styling via CSS Modules with `--ac-*` custom properties
* - Client-side only (`"use client"` directive)
*
* @example
* ```tsx
* <RippleButton>Click me</RippleButton>
* ```
*
* @see {@link RippleButtonProps} for available props
*/
declare const RippleButton: React.ForwardRefExoticComponent<Omit<RippleButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
export { RippleButton };
//# sourceMappingURL=ripple-button.d.ts.map