@@ -15,7 +15,7 @@ export default function ButtonPage() {
15
15
{
16
16
"title" : "Variants" ,
17
17
"value" : "variants" ,
18
- "content" : "import { Button } from \"@nativeui/ui\";\n\nexport default function ButtonVariants() {\n return (\n <div className=\"flex flex-col gap-4\">\n <Button variant=\"default\">Default</Button>\n <Button variant=\"destructive\">Destructive</Button>\n <Button variant=\"outline\">Outline</Button>\n <Button variant=\"secondary\">Secondary</Button>\n <Button variant=\"ghost\">Ghost</Button>\n <Button variant=\"link\">Link</Button>\n </div>\n );\n}" ,
18
+ "content" : "import { Button } from \"@nativeui/ui\";\n\nexport default function ButtonVariants() {\n return (\n <div className=\"flex flex-col gap-4\">\n <Button variant=\"default\">Default</Button>\n <Button variant=\"destructive\">Destructive</Button>\n <Button variant=\"outline\">Outline</Button>\n <Button variant=\"secondary\">Secondary</Button>\n <Button variant=\"ghost\">Ghost</Button>\n <Button variant=\"link\">Link</Button>\n <Button variant=\"selection\">Selection</Button>\n </div>\n );\n}" ,
19
19
"language" : "tsx"
20
20
} ,
21
21
{
@@ -25,75 +25,97 @@ export default function ButtonPage() {
25
25
"language" : "tsx"
26
26
}
27
27
] }
28
- componentCode = { `import * as React from "react";
28
+ componentCode = { `import { cn } from "@/lib/utils";
29
+ import { cva, type VariantProps } from "class-variance-authority";
30
+ import * as React from "react";
29
31
import {
30
32
Pressable,
31
- PressableProps as RNPressableProps,
33
+ type PressableStateCallbackType,
34
+ type PressableProps as RNPressableProps,
32
35
View,
33
- ViewStyle,
34
- PressableStateCallbackType,
36
+ type ViewStyle,
35
37
} from "react-native";
36
- import { cn } from "@/lib/utils";
37
-
38
- import { cva, type VariantProps } from "class-variance-authority";
39
38
40
39
export const buttonVariants = cva(
41
- "flex-row items-center justify-center rounded-md",
42
- {
43
- variants: {
44
- variant: {
45
- default:
46
- "bg-primary text-primary-foreground dark:bg-primary dark:text-primary-foreground shadow",
47
- destructive:
48
- "bg-destructive text-destructive-foreground dark:bg-destructive dark:text-destructive-foreground shadow-sm",
49
- outline:
50
- "border border-input bg-background text-foreground dark:border-input dark:bg-background dark:text-foreground shadow-sm",
51
- secondary:
52
- "bg-secondary text-secondary-foreground dark:bg-secondary dark:text-secondary-foreground shadow-sm",
53
- ghost: "text-foreground dark:text-foreground",
54
- link: "text-primary dark:text-primary underline",
55
- },
56
- size: {
57
- default: "h-12 px-6",
58
- sm: "h-10 px-4",
59
- lg: "h-14 px-8",
60
- icon: "h-12 w-12",
61
- },
62
- },
63
- defaultVariants: {
64
- variant: "default",
65
- size: "default",
66
- },
67
- }
40
+ "flex-row items-center justify-center rounded-lg",
41
+ {
42
+ variants: {
43
+ variant: {
44
+ default: "bg-primary text-primary-foreground shadow-sm",
45
+ destructive: "bg-destructive text-destructive-foreground shadow-sm",
46
+ outline: "border-2 border-border bg-background text-foreground",
47
+ secondary: "bg-secondary text-secondary-foreground shadow-sm",
48
+ ghost: "text-foreground",
49
+ link: "text-primary underline",
50
+ selection: "border-2 border-border bg-background",
51
+ },
52
+ size: {
53
+ default: "h-12 px-4",
54
+ sm: "h-10 px-3",
55
+ lg: "h-14 px-6",
56
+ icon: "h-12 w-12",
57
+ },
58
+ selected: {
59
+ true: "",
60
+ false: "",
61
+ },
62
+ },
63
+ compoundVariants: [
64
+ {
65
+ variant: "selection",
66
+ selected: true,
67
+ className: "border-primary bg-primary/5",
68
+ },
69
+ {
70
+ variant: "outline",
71
+ selected: true,
72
+ className: "border-primary ring-1 ring-primary/20",
73
+ },
74
+ ],
75
+ defaultVariants: {
76
+ variant: "default",
77
+ size: "default",
78
+ selected: false,
79
+ },
80
+ },
68
81
);
69
82
70
83
export interface ButtonProps
71
- extends Omit<RNPressableProps, "style">,
72
- VariantProps<typeof buttonVariants> {
73
- className?: string;
74
- style?: ViewStyle;
75
- asChild?: boolean;
84
+ extends Omit<RNPressableProps, "style">,
85
+ VariantProps<typeof buttonVariants> {
86
+ className?: string;
87
+ style?: ViewStyle;
88
+ asChild?: boolean;
89
+ selected?: boolean;
76
90
}
77
91
78
92
const Button = React.forwardRef<View, ButtonProps>(
79
- ({ className, variant, size, asChild = false, children, ...props }, ref) => {
80
- return (
81
- <Pressable
82
- className={cn(buttonVariants({ variant, size, className }))}
83
- ref={ref}
84
- {...props}
85
- >
86
- {(state: PressableStateCallbackType) => (
87
- <View
88
- className={\`flex-row items-center justify-center gap-2 \${state.pressed ? "opacity-80" : ""
89
- }\`}
90
- >
91
- {typeof children === "function" ? children(state) : children}
92
- </View>
93
- )}
94
- </Pressable>
95
- );
96
- }
93
+ (
94
+ { className, variant, size, selected, asChild = false, children, ...props },
95
+ ref,
96
+ ) => {
97
+ const [isPressed, setIsPressed] = React.useState(false);
98
+
99
+ return (
100
+ <Pressable
101
+ className={cn(buttonVariants({ variant, size, selected, className }))}
102
+ ref={ref}
103
+ onPressIn={() => setIsPressed(true)}
104
+ onPressOut={() => setIsPressed(false)}
105
+ {...props}
106
+ >
107
+ {(state: PressableStateCallbackType) => (
108
+ <View
109
+ className={\`flex-row items-center justify-center gap-2 \${
110
+ state.pressed || isPressed ? "opacity-80" : ""
111
+ }\`}
112
+ >
113
+ {typeof children === "function" ? children(state) : children}
114
+ </View>
115
+ )}
116
+ </Pressable>
117
+ );
118
+ },
97
119
);
98
120
99
121
Button.displayName = "Button";
0 commit comments