Flip Button

1import * as React from 'react';
2import { type VariantProps } from 'class-variance-authority';
3 
4import {
5  FlipButton as FlipButtonPrimitive,
6  FlipButtonFront as FlipButtonFrontPrimitive,
7  FlipButtonBack as FlipButtonBackPrimitive,
8  type FlipButtonProps as FlipButtonPrimitiveProps,
9  type FlipButtonFrontProps as FlipButtonFrontPrimitiveProps,
10  type FlipButtonBackProps as FlipButtonBackPrimitiveProps,
11} from '@/components/animate-ui/primitives/buttons/flip';
12import { getStrictContext } from '@/lib/get-strict-context';
13import { buttonVariants } from '@/components/animate-ui/components/buttons/button';
14import { cn } from '@/lib/utils';
15 
16type FlipButtonContextType = VariantProps<typeof buttonVariants>;
17 
18const [FlipButtonProvider, useFlipButton] =
19  getStrictContext<FlipButtonContextType>('FlipButtonContext');
20 
21type FlipButtonProps = FlipButtonPrimitiveProps &
22  VariantProps<typeof buttonVariants>;
23 
24function FlipButton({ variant, size, ...props }: FlipButtonProps) {
25  return (
26    <FlipButtonProvider value={{ variant, size }}>
27      <FlipButtonPrimitive {...props} />
28    </FlipButtonProvider>
29  );
30}
31 
32type FlipButtonFrontProps = FlipButtonFrontPrimitiveProps &
33  VariantProps<typeof buttonVariants>;
34 
35function FlipButtonFront({
36  variant,
37  size,
38  className,
39  ...props
40}: FlipButtonFrontProps) {
41  const { variant: buttonVariant, size: buttonSize } = useFlipButton();
42  return (
43    <FlipButtonFrontPrimitive
44      className={cn(
45        buttonVariants({
46          variant: variant ?? buttonVariant,
47          size: size ?? buttonSize,
48          className,
49        }),
50      )}
51      {...props}
52    />
53  );
54}
55 
56type FlipButtonBackProps = FlipButtonBackPrimitiveProps &
57  VariantProps<typeof buttonVariants>;
58 
59function FlipButtonBack({
60  variant,
61  size,
62  className,
63  ...props
64}: FlipButtonBackProps) {
65  const { variant: buttonVariant, size: buttonSize } = useFlipButton();
66  return (
67    <FlipButtonBackPrimitive
68      className={cn(
69        buttonVariants({
70          variant: variant ?? buttonVariant,
71          size: size ?? buttonSize,
72          className,
73        }),
74      )}
75      {...props}
76    />
77  );
78}
79 
80export {
81  FlipButton,
82  FlipButtonFront,
83  FlipButtonBack,
84  type FlipButtonProps,
85  type FlipButtonFrontProps,
86  type FlipButtonBackProps,
87};