Button

1import { cn } from "@/lib/utils";
2import { cva, type VariantProps } from "class-variance-authority";
3import * as React from "react";
4import {
5  Pressable,
6  type PressableStateCallbackType,
7  type PressableProps as RNPressableProps,
8  View,
9  type ViewStyle,
10} from "react-native";
11 
12export const buttonVariants = cva(
13	"flex-row items-center justify-center rounded-lg",
14	{
15		variants: {
16			variant: {
17				default: "bg-primary text-primary-foreground shadow-sm",
18				destructive: "bg-destructive text-destructive-foreground shadow-sm",
19				outline: "border-2 border-border bg-background text-foreground",
20				secondary: "bg-secondary text-secondary-foreground shadow-sm",
21				ghost: "text-foreground",
22				link: "text-primary underline",
23				selection: "border-2 border-border bg-background",
24			},
25			size: {
26				default: "h-12 px-4",
27				sm: "h-10 px-3",
28				lg: "h-14 px-6",
29				icon: "h-12 w-12",
30			},
31			selected: {
32				true: "",
33				false: "",
34			},
35		},
36		compoundVariants: [
37			{
38				variant: "selection",
39				selected: true,
40				className: "border-primary bg-primary/5",
41			},
42			{
43				variant: "outline",
44				selected: true,
45				className: "border-primary ring-1 ring-primary/20",
46			},
47		],
48		defaultVariants: {
49			variant: "default",
50			size: "default",
51			selected: false,
52		},
53	},
54);
55 
56export interface ButtonProps
57	extends Omit<RNPressableProps, "style">,
58		VariantProps<typeof buttonVariants> {
59	className?: string;
60	style?: ViewStyle;
61	asChild?: boolean;
62	selected?: boolean;
63}
64 
65const Button = React.forwardRef<View, ButtonProps>(
66	(
67		{ className, variant, size, selected, asChild = false, children, ...props },
68		ref,
69	) => {
70		const [isPressed, setIsPressed] = React.useState(false);
71 
72		return (
73			<Pressable
74				className={cn(buttonVariants({ variant, size, selected, className }))}
75				ref={ref}
76				onPressIn={() => setIsPressed(true)}
77				onPressOut={() => setIsPressed(false)}
78				{...props}
79			>
80				{(state: PressableStateCallbackType) => (
81					<View
82						className={`flex-row items-center justify-center gap-2 ${
83							state.pressed || isPressed ? "opacity-80" : ""
84						}`}
85					>
86						{typeof children === "function" ? children(state) : children}
87					</View>
88				)}
89			</Pressable>
90		);
91	},
92);
93 
94Button.displayName = "Button";
95 
96export { Button };