Ripple Button

1'use client';
2 
3import * as React from 'react';
4import { type VariantProps } from 'class-variance-authority';
5 
6import { buttonVariants } from '@/components/animate-ui/components/buttons/button';
7import {
8  RippleButton as RippleButtonPrimitive,
9  RippleButtonRipples as RippleButtonRipplesPrimitive,
10  type RippleButtonProps as RippleButtonPrimitiveProps,
11  type RippleButtonRipplesProps as RippleButtonRipplesPrimitiveProps,
12} from '@/components/animate-ui/primitives/buttons/ripple';
13import { cn } from '@/lib/utils';
14 
15const rippleButtonVariants = {
16  default: '[--ripple-button-ripple-color:var(--primary-foreground)]',
17  accent: '[--ripple-button-ripple-color:var(--accent-foreground)]',
18  destructive: '[--ripple-button-ripple-color:var(--destructive-foreground)]',
19  outline: '[--ripple-button-ripple-color:var(--foreground)]',
20  secondary: '[--ripple-button-ripple-color:var(--secondary-foreground)]',
21  ghost: '[--ripple-button-ripple-color:var(--foreground)]',
22  link: '[--ripple-button-ripple-color:var(--primary-foreground)]',
23};
24 
25type RippleButtonProps = RippleButtonPrimitiveProps &
26  VariantProps<typeof buttonVariants>;
27 
28function RippleButton({
29  className,
30  variant,
31  size,
32  ...props
33}: RippleButtonProps) {
34  return (
35    <RippleButtonPrimitive
36      className={cn(
37        buttonVariants({ variant, size, className }),
38        rippleButtonVariants[variant as keyof typeof rippleButtonVariants],
39      )}
40      {...props}
41    />
42  );
43}
44 
45type RippleButtonRipplesProps = RippleButtonRipplesPrimitiveProps;
46 
47function RippleButtonRipples(props: RippleButtonRipplesProps) {
48  return <RippleButtonRipplesPrimitive {...props} />;
49}
50 
51export {
52  RippleButton,
53  RippleButtonRipples,
54  type RippleButtonProps,
55  type RippleButtonRipplesProps,
56};