teal.fm
Your music, beautifully tracked. All yours. (coming soon)
teal.fm
teal-fm
atproto
mmatt.net
1import * as React from "react";
2import { Pressable } from "react-native";
3import { cva, type VariantProps } from "class-variance-authority";
4
5import { TextClassContext } from "../../components/ui/text";
6import { cn } from "../../lib/utils";
7
8const buttonVariants = cva(
9 "group flex items-center justify-center rounded-md web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2",
10 {
11 variants: {
12 variant: {
13 default: "bg-primary web:hover:opacity-90 active:opacity-90",
14 destructive: "bg-destructive web:hover:opacity-90 active:opacity-90",
15 outline:
16 "border border-input bg-background web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent",
17 secondary: "bg-secondary web:hover:opacity-80 active:opacity-80",
18 ghost:
19 "web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent",
20 link: "web:underline-offset-4 web:hover:underline web:focus:underline ",
21 },
22 size: {
23 default: "h-10 px-4 py-2 native:h-12 native:px-5 native:py-3",
24 sm: "h-9 rounded-md px-3",
25 lg: "h-11 rounded-md px-8 native:h-14",
26 icon: "h-10 w-10",
27 },
28 },
29 defaultVariants: {
30 variant: "default",
31 size: "default",
32 },
33 },
34);
35
36const buttonTextVariants = cva(
37 "web:whitespace-nowrap text-sm native:text-base font-medium text-foreground web:transition-colors",
38 {
39 variants: {
40 variant: {
41 default: "text-primary-foreground",
42 destructive: "text-destructive-foreground",
43 outline: "group-active:text-accent-foreground",
44 secondary:
45 "text-secondary-foreground group-active:text-secondary-foreground",
46 ghost: "group-active:text-accent-foreground",
47 link: "text-primary group-active:underline",
48 },
49 size: {
50 default: "",
51 sm: "",
52 lg: "native:text-lg",
53 icon: "",
54 },
55 },
56 defaultVariants: {
57 variant: "default",
58 size: "default",
59 },
60 },
61);
62
63type ButtonProps = React.ComponentPropsWithoutRef<typeof Pressable> &
64 VariantProps<typeof buttonVariants>;
65
66const Button = React.forwardRef<
67 React.ElementRef<typeof Pressable>,
68 ButtonProps
69>(({ className, variant, size, ...props }, ref) => {
70 return (
71 <TextClassContext.Provider
72 value={cn(
73 props.disabled && "web:pointer-events-none",
74 buttonTextVariants({ variant, size }),
75 )}
76 >
77 <Pressable
78 className={cn(
79 props.disabled && "opacity-50 web:pointer-events-none",
80 buttonVariants({ variant, size, className }),
81 )}
82 ref={ref}
83 role="button"
84 {...props}
85 />
86 </TextClassContext.Provider>
87 );
88});
89Button.displayName = "Button";
90
91export { Button, buttonTextVariants, buttonVariants };
92export type { ButtonProps };