@lets-events/react 12.7.1 → 12.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +5 -5
- package/CHANGELOG.md +6 -0
- package/dist/index.js +2 -2
- package/dist/index.mjs +2 -2
- package/package.json +1 -1
- package/src/components/Badge.tsx +115 -117
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @lets-events/react@12.7.
|
|
2
|
+
> @lets-events/react@12.7.2 build
|
|
3
3
|
> tsup src/index.tsx --format esm,cjs --dts --external react
|
|
4
4
|
|
|
5
5
|
[34mCLI[39m Building entry: src/index.tsx
|
|
@@ -9,11 +9,11 @@
|
|
|
9
9
|
[34mCLI[39m Target: es6
|
|
10
10
|
[34mESM[39m Build start
|
|
11
11
|
[34mCJS[39m Build start
|
|
12
|
-
[32mCJS[39m [1mdist\index.js [22m[32m404.79 KB[39m
|
|
13
|
-
[32mCJS[39m ⚡️ Build success in 199ms
|
|
14
12
|
[32mESM[39m [1mdist\index.mjs [22m[32m389.70 KB[39m
|
|
15
|
-
[32mESM[39m ⚡️ Build success in
|
|
13
|
+
[32mESM[39m ⚡️ Build success in 199ms
|
|
14
|
+
[32mCJS[39m [1mdist\index.js [22m[32m404.79 KB[39m
|
|
15
|
+
[32mCJS[39m ⚡️ Build success in 204ms
|
|
16
16
|
[34mDTS[39m Build start
|
|
17
|
-
[32mDTS[39m ⚡️ Build success in
|
|
17
|
+
[32mDTS[39m ⚡️ Build success in 4599ms
|
|
18
18
|
[32mDTS[39m [1mdist\index.d.mts [22m[32m403.02 KB[39m
|
|
19
19
|
[32mDTS[39m [1mdist\index.d.ts [22m[32m403.02 KB[39m
|
package/CHANGELOG.md
CHANGED
package/dist/index.js
CHANGED
|
@@ -3692,7 +3692,7 @@ var BadgeStyled = styled(import_themes11.Badge, {
|
|
|
3692
3692
|
padding: "$4 $6",
|
|
3693
3693
|
fontSize: "$badgeExtraSmall",
|
|
3694
3694
|
borderRadius: "$2xs",
|
|
3695
|
-
lineHeight: "$
|
|
3695
|
+
lineHeight: "$badgeExtraSmall"
|
|
3696
3696
|
},
|
|
3697
3697
|
sm: {
|
|
3698
3698
|
padding: "$4 $8",
|
|
@@ -3720,7 +3720,7 @@ var BadgeStyled = styled(import_themes11.Badge, {
|
|
|
3720
3720
|
bold: { fontWeight: "$bold" }
|
|
3721
3721
|
},
|
|
3722
3722
|
radii: {
|
|
3723
|
-
|
|
3723
|
+
full: {
|
|
3724
3724
|
borderRadius: "$full"
|
|
3725
3725
|
}
|
|
3726
3726
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -3577,7 +3577,7 @@ var BadgeStyled = styled(BadgeRadix, {
|
|
|
3577
3577
|
padding: "$4 $6",
|
|
3578
3578
|
fontSize: "$badgeExtraSmall",
|
|
3579
3579
|
borderRadius: "$2xs",
|
|
3580
|
-
lineHeight: "$
|
|
3580
|
+
lineHeight: "$badgeExtraSmall"
|
|
3581
3581
|
},
|
|
3582
3582
|
sm: {
|
|
3583
3583
|
padding: "$4 $8",
|
|
@@ -3605,7 +3605,7 @@ var BadgeStyled = styled(BadgeRadix, {
|
|
|
3605
3605
|
bold: { fontWeight: "$bold" }
|
|
3606
3606
|
},
|
|
3607
3607
|
radii: {
|
|
3608
|
-
|
|
3608
|
+
full: {
|
|
3609
3609
|
borderRadius: "$full"
|
|
3610
3610
|
}
|
|
3611
3611
|
}
|
package/package.json
CHANGED
package/src/components/Badge.tsx
CHANGED
|
@@ -1,125 +1,123 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { ComponentProps, ElementType } from
|
|
3
|
-
import { styled } from
|
|
4
|
-
import { Badge as BadgeRadix } from
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ComponentProps, ElementType } from "react";
|
|
3
|
+
import { styled } from "../styles";
|
|
4
|
+
import { Badge as BadgeRadix } from "@radix-ui/themes";
|
|
5
5
|
export const BadgeStyled = styled(BadgeRadix, {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
},
|
|
62
|
-
size: {
|
|
63
|
-
xs: {
|
|
64
|
-
padding: '$4 $6',
|
|
65
|
-
fontSize: '$badgeExtraSmall',
|
|
66
|
-
borderRadius: '$2xs',
|
|
67
|
-
lineHeight: '$bagdeExtraSmall',
|
|
68
|
-
},
|
|
69
|
-
sm: {
|
|
70
|
-
padding: '$4 $8',
|
|
71
|
-
fontSize: '$badgeSmall',
|
|
72
|
-
borderRadius: '$xs',
|
|
73
|
-
lineHeight: '$badgeSmall',
|
|
74
|
-
},
|
|
75
|
-
md: {
|
|
76
|
-
padding: '$8 $10',
|
|
77
|
-
fontSize: '$badgeMedium',
|
|
78
|
-
borderRadius: '$sm',
|
|
79
|
-
lineHeight: '$badgeMedium',
|
|
80
|
-
},
|
|
81
|
-
xl: {
|
|
82
|
-
padding: '$12 $12',
|
|
83
|
-
fontSize: '$badgeLarge',
|
|
84
|
-
borderRadius: '$sm',
|
|
85
|
-
lineHeight: '$badgeLarge',
|
|
86
|
-
},
|
|
87
|
-
},
|
|
88
|
-
fontWeight: {
|
|
89
|
-
regular: { fontWeight: '$regular' },
|
|
90
|
-
medium: { fontWeight: '$medium' },
|
|
91
|
-
semibold: { fontWeight: '$semibold' },
|
|
92
|
-
bold: { fontWeight: '$bold' },
|
|
93
|
-
},
|
|
94
|
-
radii: {
|
|
95
|
-
'full': {
|
|
96
|
-
borderRadius: '$full',
|
|
97
|
-
},
|
|
98
|
-
},
|
|
6
|
+
fontFamily: "$default",
|
|
7
|
+
borderRadius: "$sm",
|
|
8
|
+
verticalAlign: "middle",
|
|
9
|
+
variants: {
|
|
10
|
+
color: {
|
|
11
|
+
primary: {
|
|
12
|
+
backgroundColor: "$brand100",
|
|
13
|
+
color: "$dark700",
|
|
14
|
+
},
|
|
15
|
+
dark: {
|
|
16
|
+
backgroundColor: "$dark700",
|
|
17
|
+
color: "$grey50",
|
|
18
|
+
},
|
|
19
|
+
light: {
|
|
20
|
+
backgroundColor: "$neutral200",
|
|
21
|
+
color: "$dark700",
|
|
22
|
+
},
|
|
23
|
+
red: {
|
|
24
|
+
backgroundColor: "$red100",
|
|
25
|
+
color: "$dark700",
|
|
26
|
+
},
|
|
27
|
+
green: {
|
|
28
|
+
backgroundColor: "$green100",
|
|
29
|
+
color: "$dark700",
|
|
30
|
+
},
|
|
31
|
+
yellow: {
|
|
32
|
+
backgroundColor: "$yellow100",
|
|
33
|
+
color: "$dark700",
|
|
34
|
+
},
|
|
35
|
+
orange: {
|
|
36
|
+
backgroundColor: "$orange100",
|
|
37
|
+
color: "$dark700",
|
|
38
|
+
},
|
|
39
|
+
blue: {
|
|
40
|
+
backgroundColor: "$blue100",
|
|
41
|
+
color: "$dark700",
|
|
42
|
+
},
|
|
43
|
+
pink: {
|
|
44
|
+
backgroundColor: "$pink100",
|
|
45
|
+
color: "$dark700",
|
|
46
|
+
},
|
|
47
|
+
purple: {
|
|
48
|
+
backgroundColor: "$purple100",
|
|
49
|
+
color: "$dark700",
|
|
50
|
+
},
|
|
51
|
+
grey: {
|
|
52
|
+
backgroundColor: "$grey200",
|
|
53
|
+
color: "$dark700",
|
|
54
|
+
},
|
|
55
|
+
disable: {
|
|
56
|
+
backgroundColor: "$neutral200",
|
|
57
|
+
color: "$grey500",
|
|
58
|
+
},
|
|
99
59
|
},
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
60
|
+
size: {
|
|
61
|
+
xs: {
|
|
62
|
+
padding: "$4 $6",
|
|
63
|
+
fontSize: "$badgeExtraSmall",
|
|
64
|
+
borderRadius: "$2xs",
|
|
65
|
+
lineHeight: "$badgeExtraSmall",
|
|
66
|
+
},
|
|
67
|
+
sm: {
|
|
68
|
+
padding: "$4 $8",
|
|
69
|
+
fontSize: "$badgeSmall",
|
|
70
|
+
borderRadius: "$xs",
|
|
71
|
+
lineHeight: "$badgeSmall",
|
|
72
|
+
},
|
|
73
|
+
md: {
|
|
74
|
+
padding: "$8 $10",
|
|
75
|
+
fontSize: "$badgeMedium",
|
|
76
|
+
borderRadius: "$sm",
|
|
77
|
+
lineHeight: "$badgeMedium",
|
|
78
|
+
},
|
|
79
|
+
xl: {
|
|
80
|
+
padding: "$12 $12",
|
|
81
|
+
fontSize: "$badgeLarge",
|
|
82
|
+
borderRadius: "$sm",
|
|
83
|
+
lineHeight: "$badgeLarge",
|
|
84
|
+
},
|
|
85
|
+
},
|
|
86
|
+
fontWeight: {
|
|
87
|
+
regular: { fontWeight: "$regular" },
|
|
88
|
+
medium: { fontWeight: "$medium" },
|
|
89
|
+
semibold: { fontWeight: "$semibold" },
|
|
90
|
+
bold: { fontWeight: "$bold" },
|
|
105
91
|
},
|
|
106
|
-
|
|
92
|
+
radii: {
|
|
93
|
+
full: {
|
|
94
|
+
borderRadius: "$full",
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
},
|
|
98
|
+
|
|
99
|
+
defaultVariants: {
|
|
100
|
+
size: "md",
|
|
101
|
+
color: "primary",
|
|
102
|
+
fontWeight: "regular",
|
|
103
|
+
},
|
|
104
|
+
});
|
|
107
105
|
|
|
108
106
|
export type BadgeProps = ComponentProps<typeof BadgeStyled> & {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
}
|
|
107
|
+
as?: ElementType;
|
|
108
|
+
icon?: boolean;
|
|
109
|
+
children: React.ReactNode;
|
|
110
|
+
};
|
|
113
111
|
|
|
114
112
|
export function Badge({ asChild, children, ...props }: BadgeProps) {
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
113
|
+
return (
|
|
114
|
+
<BadgeStyled {...props}>
|
|
115
|
+
{React.Children.map(children, (child) => {
|
|
116
|
+
if (React.isValidElement(child)) {
|
|
117
|
+
return React.cloneElement(child, { size: props.size } as any);
|
|
118
|
+
}
|
|
119
|
+
return child;
|
|
120
|
+
})}
|
|
121
|
+
</BadgeStyled>
|
|
122
|
+
);
|
|
125
123
|
}
|