@lets-events/react 5.0.0 → 6.0.0

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.
Files changed (32) hide show
  1. package/.eslintrc.json +2 -2
  2. package/.turbo/turbo-build.log +20 -18
  3. package/CHANGELOG.md +8 -1
  4. package/dist/index.d.mts +42 -11
  5. package/dist/index.d.ts +42 -11
  6. package/dist/index.js +585 -141
  7. package/dist/index.mjs +589 -145
  8. package/package.json +1 -1
  9. package/src/components/Alert.tsx +255 -255
  10. package/src/components/Avatar.tsx +55 -55
  11. package/src/components/Badge.tsx +129 -121
  12. package/src/components/Box.tsx +3 -3
  13. package/src/components/Button.tsx +328 -342
  14. package/src/components/ButtonGroup.tsx +484 -477
  15. package/src/components/CheckboxGroup.tsx +214 -208
  16. package/src/components/Container.tsx +39 -39
  17. package/src/components/Dropdown.tsx +167 -109
  18. package/src/components/Filter.tsx +164 -95
  19. package/src/components/Flex.tsx +117 -117
  20. package/src/components/Grid.tsx +137 -137
  21. package/src/components/Icon.tsx +47 -47
  22. package/src/components/Modal.tsx +108 -108
  23. package/src/components/RadioGroup.tsx +210 -203
  24. package/src/components/Section.tsx +33 -33
  25. package/src/components/Step.tsx +147 -147
  26. package/src/components/Switch.tsx +108 -108
  27. package/src/components/Text.tsx +31 -31
  28. package/src/components/TextField.tsx +241 -193
  29. package/src/index.tsx +27 -27
  30. package/src/styles/index.ts +38 -38
  31. package/src/types/typographyValues.ts +179 -0
  32. package/tsconfig.json +3 -3
package/src/components/Badge.tsx CHANGED
@@ -1,121 +1,129 @@
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
- export const BadgeStyled = styled(BadgeRadix, {
6
- fontFamily: '$default',
7
- borderRadius: '$sm',
8
- verticalAlign: 'middle',
9
- 'svg': {
10
- marginRight: '10px',
11
- },
12
- variants: {
13
- color: {
14
- primary: {
15
- backgroundColor: '$brand100',
16
- color: '$dark700',
17
- },
18
- dark: {
19
- backgroundColor: '$dark700',
20
- color: '$grey50',
21
- },
22
- light: {
23
- backgroundColor: '$neutral200',
24
- color: '$dark700',
25
- },
26
- red: {
27
- backgroundColor: '$red100',
28
- color: '$dark700',
29
- },
30
- green: {
31
- backgroundColor: '$green100',
32
- color: '$dark700',
33
- },
34
- yellow: {
35
- backgroundColor: '$yellow100',
36
- color: '$dark700',
37
- },
38
- orange: {
39
- backgroundColor: '$orange100',
40
- color: '$dark700',
41
- },
42
- blue: {
43
- backgroundColor: '$blue100',
44
- color: '$dark700',
45
- },
46
- pink: {
47
- backgroundColor: '$pink100',
48
- color: '$dark700',
49
- },
50
- purple: {
51
- backgroundColor: '$purple100',
52
- color: '$dark700',
53
- },
54
- grey: {
55
- backgroundColor: '$grey200',
56
- color: '$dark700',
57
- },
58
- disable: {
59
- backgroundColor: '$neutral200',
60
- color: '$grey500',
61
- }
62
-
63
-
64
- },
65
- size: {
66
- xs: {
67
- padding: '$4 $6',
68
- fontSize: '$10',
69
- borderRadius: '$2xs',
70
- lineHeight: '$smaller',
71
- },
72
- sm: {
73
- padding: '$4 $8',
74
- fontSize: '$12',
75
- borderRadius: '$xs',
76
- lineHeight: '$smaller',
77
- },
78
- md: {
79
- padding: '$8 $10',
80
- fontSize: '$14',
81
- borderRadius: '$sm',
82
- lineHeight: '$smaller',
83
- },
84
- xl: {
85
- padding: '$12 $12',
86
- fontSize: '$16',
87
- borderRadius: '$sm',
88
- lineHeight: '$smaller',
89
- },
90
- },
91
- radii: {
92
- 'full': {
93
- borderRadius: '$full',
94
- },
95
- },
96
- },
97
-
98
- defaultVariants: {
99
- size: 'md',
100
- color: 'primary',
101
- },
102
- })
103
-
104
- export type BadgeProps = ComponentProps<typeof BadgeStyled> & {
105
- as?: ElementType
106
- icon?: boolean
107
- size: 'md',
108
- children: React.ReactNode
109
- }
110
- export function Badge({ asChild, children, ...props }: BadgeProps) {
111
- return (
112
- <BadgeStyled {...props}>
113
- {React.Children.map(children, (child) => {
114
- if (React.isValidElement(child)) {
115
- return React.cloneElement(child, { size: props.size } as any)
116
- }
117
- return child
118
- })}
119
- </BadgeStyled>
120
- )
121
- }
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
+ import { fontWeights } from '@lets-events/tokens'
6
+ export const BadgeStyled = styled(BadgeRadix, {
7
+ fontFamily: '$default',
8
+ borderRadius: '$sm',
9
+ verticalAlign: 'middle',
10
+ 'svg': {
11
+ marginRight: '10px',
12
+ },
13
+ variants: {
14
+ color: {
15
+ primary: {
16
+ backgroundColor: '$brand100',
17
+ color: '$dark700',
18
+ },
19
+ dark: {
20
+ backgroundColor: '$dark700',
21
+ color: '$grey50',
22
+ },
23
+ light: {
24
+ backgroundColor: '$neutral200',
25
+ color: '$dark700',
26
+ },
27
+ red: {
28
+ backgroundColor: '$red100',
29
+ color: '$dark700',
30
+ },
31
+ green: {
32
+ backgroundColor: '$green100',
33
+ color: '$dark700',
34
+ },
35
+ yellow: {
36
+ backgroundColor: '$yellow100',
37
+ color: '$dark700',
38
+ },
39
+ orange: {
40
+ backgroundColor: '$orange100',
41
+ color: '$dark700',
42
+ },
43
+ blue: {
44
+ backgroundColor: '$blue100',
45
+ color: '$dark700',
46
+ },
47
+ pink: {
48
+ backgroundColor: '$pink100',
49
+ color: '$dark700',
50
+ },
51
+ purple: {
52
+ backgroundColor: '$purple100',
53
+ color: '$dark700',
54
+ },
55
+ grey: {
56
+ backgroundColor: '$grey200',
57
+ color: '$dark700',
58
+ },
59
+ disable: {
60
+ backgroundColor: '$neutral200',
61
+ color: '$grey500',
62
+ }
63
+
64
+
65
+ },
66
+ size: {
67
+ xs: {
68
+ padding: '$4 $6',
69
+ fontSize: '$badgeExtraSmall',
70
+ borderRadius: '$2xs',
71
+ lineHeight: '$bagdeExtraSmall',
72
+ },
73
+ sm: {
74
+ padding: '$4 $8',
75
+ fontSize: '$badgeSmall',
76
+ borderRadius: '$xs',
77
+ lineHeight: '$badgeSmall',
78
+ },
79
+ md: {
80
+ padding: '$8 $10',
81
+ fontSize: '$badgeMedium',
82
+ borderRadius: '$sm',
83
+ lineHeight: '$badgeMedium',
84
+ },
85
+ xl: {
86
+ padding: '$12 $12',
87
+ fontSize: '$badgeLarge',
88
+ borderRadius: '$sm',
89
+ lineHeight: '$badgeLarge',
90
+ },
91
+ },
92
+ fontWeight: {
93
+ regular: { fontWeight: '$regular' },
94
+ medium: { fontWeight: '$medium' },
95
+ semibold: { fontWeight: '$semibold' },
96
+ bold: { fontWeight: '$bold' },
97
+ },
98
+ radii: {
99
+ 'full': {
100
+ borderRadius: '$full',
101
+ },
102
+ },
103
+ },
104
+
105
+ defaultVariants: {
106
+ size: 'md',
107
+ color: 'primary',
108
+ fontWeight: 'regular',
109
+ },
110
+ })
111
+
112
+ export type BadgeProps = ComponentProps<typeof BadgeStyled> & {
113
+ as?: ElementType
114
+ icon?: boolean
115
+ size: 'md',
116
+ children: React.ReactNode
117
+ }
118
+ export function Badge({ asChild, children, ...props }: BadgeProps) {
119
+ return (
120
+ <BadgeStyled {...props}>
121
+ {React.Children.map(children, (child) => {
122
+ if (React.isValidElement(child)) {
123
+ return React.cloneElement(child, { size: props.size } as any)
124
+ }
125
+ return child
126
+ })}
127
+ </BadgeStyled>
128
+ )
129
+ }
package/src/components/Box.tsx CHANGED
@@ -1,3 +1,3 @@
1
- import { Box as BoxRadix } from "@radix-ui/themes";
2
- export const Box = BoxRadix
3
-
1
+ import { Box as BoxRadix } from "@radix-ui/themes";
2
+ export const Box = BoxRadix
3
+