Skip to content

Commit 1644ab6

Browse files
theoribbitheoribbi
authored
Merge pull request #92 from nativeui-org/feat/update-ds-button-input
chore(ui): update input and button components styling
2 parents fdea27b + 5bbdb9c commit 1644ab6

File tree

2 files changed

+108
-83
lines changed

2 files changed

+108
-83
lines changed

‎registry/button/button.tsx‎

Lines changed: 78 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,94 @@
1+
import { cn } from "@/lib/utils";
2+
import { cva, type VariantProps } from "class-variance-authority";
13
import * as React from "react";
24
import {
35
Pressable,
4-
PressableProps as RNPressableProps,
6+
type PressableStateCallbackType,
7+
type PressableProps as RNPressableProps,
58
View,
6-
ViewStyle,
7-
PressableStateCallbackType,
9+
type ViewStyle,
810
} from "react-native";
9-
import { cn } from "@/lib/utils";
10-
11-
import { cva, type VariantProps } from "class-variance-authority";
1211

1312
export const buttonVariants = cva(
14-
"flex-row items-center justify-center rounded-md",
15-
{
16-
variants: {
17-
variant: {
18-
default:
19-
"bg-primary text-primary-foreground dark:bg-primary dark:text-primary-foreground shadow",
20-
destructive:
21-
"bg-destructive text-destructive-foreground dark:bg-destructive dark:text-destructive-foreground shadow-sm",
22-
outline:
23-
"border border-input bg-background text-foreground dark:border-input dark:bg-background dark:text-foreground shadow-sm",
24-
secondary:
25-
"bg-secondary text-secondary-foreground dark:bg-secondary dark:text-secondary-foreground shadow-sm",
26-
ghost: "text-foreground dark:text-foreground",
27-
link: "text-primary dark:text-primary underline",
28-
},
29-
size: {
30-
default: "h-12 px-6",
31-
sm: "h-10 px-4",
32-
lg: "h-14 px-8",
33-
icon: "h-12 w-12",
34-
},
35-
},
36-
defaultVariants: {
37-
variant: "default",
38-
size: "default",
39-
},
40-
}
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+
},
4154
);
4255

4356
export interface ButtonProps
44-
extends Omit<RNPressableProps, "style">,
45-
VariantProps<typeof buttonVariants> {
46-
className?: string;
47-
style?: ViewStyle;
48-
asChild?: boolean;
57+
extends Omit<RNPressableProps, "style">,
58+
VariantProps<typeof buttonVariants> {
59+
className?: string;
60+
style?: ViewStyle;
61+
asChild?: boolean;
62+
selected?: boolean;
4963
}
5064

5165
const Button = React.forwardRef<View, ButtonProps>(
52-
({ className, variant, size, asChild = false, children, ...props }, ref) => {
53-
return (
54-
<Pressable
55-
className={cn(buttonVariants({ variant, size, className }))}
56-
ref={ref}
57-
{...props}
58-
>
59-
{(state: PressableStateCallbackType) => (
60-
<View
61-
className={`flex-row items-center justify-center gap-2 ${state.pressed ? "opacity-80" : ""
62-
}`}
63-
>
64-
{typeof children === "function" ? children(state) : children}
65-
</View>
66-
)}
67-
</Pressable>
68-
);
69-
}
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+
},
7092
);
7193

7294
Button.displayName = "Button";

‎registry/input/input.tsx‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,34 @@
1-
import * as React from "react"
2-
import { TextInput, Platform } from "react-native"
3-
import { cn } from "@/lib/utils"
1+
import { cn } from "@/lib/utils";
2+
import * as React from "react";
3+
import { Platform, TextInput } from "react-native";
44

5-
const Input = React.forwardRef<TextInput, React.ComponentProps<typeof TextInput>>(
6-
({ className, ...props }, ref) => {
7-
const [isFocused, setIsFocused] = React.useState(false)
5+
const Input = React.forwardRef<
6+
TextInput,
7+
React.ComponentProps<typeof TextInput>
8+
>(({ className, ...props }, ref) => {
9+
const [isFocused, setIsFocused] = React.useState(false);
810

9-
return (
10-
<TextInput
11-
className={cn(
12-
"h-12 w-full rounded-md border border-input bg-transparent px-3 text-primary shadow-sm",
13-
"placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
14-
isFocused ? "border-ring ring-1 ring-ring" : "",
15-
Platform.OS === "ios" ? "ios:shadow-sm ios:shadow-foreground/10" : "android:elevation-1",
16-
className
17-
)}
18-
ref={ref}
19-
textAlignVertical="center"
20-
underlineColorAndroid="transparent"
21-
onFocus={() => setIsFocused(true)}
22-
onBlur={() => setIsFocused(false)}
23-
{...props}
24-
/>
25-
)
26-
}
27-
)
11+
return (
12+
<TextInput
13+
className={cn(
14+
"h-12 w-full rounded-lg border bg-background px-3 text-foreground shadow-sm",
15+
"placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
16+
isFocused ? "border-ring" : "border-input",
17+
Platform.OS === "ios"
18+
? "ios:shadow-sm ios:shadow-foreground/10"
19+
: "android:elevation-1",
20+
className,
21+
)}
22+
ref={ref}
23+
textAlignVertical="center"
24+
underlineColorAndroid="transparent"
25+
onFocus={() => setIsFocused(true)}
26+
onBlur={() => setIsFocused(false)}
27+
{...props}
28+
/>
29+
);
30+
});
2831

29-
Input.displayName = "Input"
32+
Input.displayName = "Input";
3033

31-
export { Input }
34+
export { Input };

0 commit comments

Comments
 (0)