@lets-events/react 5.0.0 → 6.1.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.
- package/.eslintrc.json +2 -2
- package/.turbo/turbo-build.log +20 -18
- package/CHANGELOG.md +14 -1
- package/dist/index.d.mts +1916 -12
- package/dist/index.d.ts +1916 -12
- package/dist/index.js +5129 -348
- package/dist/index.mjs +5083 -307
- package/package.json +3 -2
- package/src/components/Alert.tsx +255 -255
- package/src/components/Avatar.tsx +55 -55
- package/src/components/Badge.tsx +129 -121
- package/src/components/Box.tsx +3 -3
- package/src/components/Button/index.tsx +13 -0
- package/src/components/Button/styledComponents.ts +359 -0
- package/src/components/ButtonGroup.tsx +484 -477
- package/src/components/Calendar/index.tsx +122 -0
- package/src/components/Calendar/styledComponents.ts +195 -0
- package/src/components/CheckboxGroup.tsx +214 -208
- package/src/components/Container.tsx +39 -39
- package/src/components/Dropdown.tsx +167 -109
- package/src/components/Filter.tsx +164 -95
- package/src/components/Flex.tsx +117 -117
- package/src/components/Grid.tsx +137 -137
- package/src/components/Icon.tsx +47 -47
- package/src/components/Modal.tsx +108 -108
- package/src/components/RadioGroup.tsx +210 -203
- package/src/components/Section.tsx +33 -33
- package/src/components/Step.tsx +147 -147
- package/src/components/Switch.tsx +108 -108
- package/src/components/Text.tsx +31 -31
- package/src/components/TextField.tsx +261 -193
- package/src/components/TimePicker.tsx +125 -0
- package/src/index.tsx +29 -27
- package/src/styles/index.ts +38 -38
- package/src/types/typographyValues.ts +179 -0
- package/tsconfig.json +3 -3
- package/src/components/Button.tsx +0 -343
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import React, { ComponentProps, useEffect, useState } from 'react'
|
|
2
|
+
import { DayPicker } from 'react-day-picker';
|
|
3
|
+
import { ptBR } from 'date-fns/locale';
|
|
4
|
+
import { Dialog as Calendaradix } from "@radix-ui/themes";
|
|
5
|
+
import { parse, isValid, format, addYears } from 'date-fns';
|
|
6
|
+
import { Button } from '../Button';
|
|
7
|
+
import { Box } from '../Box';
|
|
8
|
+
import { TextField, TextFieldSlot } from '../TextField';
|
|
9
|
+
import Icon from '../Icon';
|
|
10
|
+
import {
|
|
11
|
+
CalendarContentStyled,
|
|
12
|
+
CalendarFooterStyled,
|
|
13
|
+
CalendarStyled,
|
|
14
|
+
DayPickerWrapperStyled
|
|
15
|
+
} from './styledComponents';
|
|
16
|
+
|
|
17
|
+
export type CalendarProps = ComponentProps<typeof CalendarStyled> & {
|
|
18
|
+
calendarLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years"
|
|
19
|
+
selected: Date | undefined
|
|
20
|
+
setSelected: React.Dispatch<React.SetStateAction<Date | undefined>>
|
|
21
|
+
action?: boolean
|
|
22
|
+
actionText?: string
|
|
23
|
+
onAction?: () => void
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function formatToDateMask(value: string): string {
|
|
27
|
+
const numeric = value.replace(/\D/g, '').slice(0, 8)
|
|
28
|
+
const parts = numeric.match(/^(\d{0,2})(\d{0,2})(\d{0,4})$/)
|
|
29
|
+
if (!parts) return ''
|
|
30
|
+
const [, day, month, year] = parts
|
|
31
|
+
return [day, month, year].filter(Boolean).join('/')
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export function Calendar({
|
|
35
|
+
action,
|
|
36
|
+
actionText,
|
|
37
|
+
calendarLayout,
|
|
38
|
+
selected,
|
|
39
|
+
setSelected,
|
|
40
|
+
onAction,
|
|
41
|
+
...props
|
|
42
|
+
}: CalendarProps) {
|
|
43
|
+
const [inputValue, setInputValue] = useState('')
|
|
44
|
+
|
|
45
|
+
const today = new Date()
|
|
46
|
+
const maxDate = addYears(today, 20)
|
|
47
|
+
|
|
48
|
+
useEffect(() => {
|
|
49
|
+
console.log('selected', selected)
|
|
50
|
+
if (selected) {
|
|
51
|
+
setInputValue(format(selected, 'dd/MM/yyyy'))
|
|
52
|
+
} else {
|
|
53
|
+
setInputValue('')
|
|
54
|
+
}
|
|
55
|
+
}, [selected])
|
|
56
|
+
|
|
57
|
+
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
58
|
+
const masked = formatToDateMask(e.target.value)
|
|
59
|
+
setInputValue(masked)
|
|
60
|
+
|
|
61
|
+
const parsed = parse(masked, 'dd/MM/yyyy', new Date())
|
|
62
|
+
if (isValid(parsed)) {
|
|
63
|
+
setSelected(parsed)
|
|
64
|
+
} else {
|
|
65
|
+
console.warn('Data inválida inserida no input:', masked)
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
return (
|
|
70
|
+
<Calendaradix.Root >
|
|
71
|
+
<CalendarStyled {...props}>
|
|
72
|
+
<Calendaradix.Trigger>
|
|
73
|
+
<TextField
|
|
74
|
+
placeholder="00/00/0000"
|
|
75
|
+
type="text"
|
|
76
|
+
value={inputValue}
|
|
77
|
+
onChange={handleInputChange}
|
|
78
|
+
inputMode="numeric"
|
|
79
|
+
>
|
|
80
|
+
<TextFieldSlot>
|
|
81
|
+
<Icon name="calendar" size={'xl'} />
|
|
82
|
+
</TextFieldSlot>
|
|
83
|
+
</TextField>
|
|
84
|
+
</Calendaradix.Trigger>
|
|
85
|
+
|
|
86
|
+
<CalendarContentStyled>
|
|
87
|
+
<Box>
|
|
88
|
+
<DayPickerWrapperStyled>
|
|
89
|
+
<DayPicker
|
|
90
|
+
mode="single"
|
|
91
|
+
captionLayout={calendarLayout}
|
|
92
|
+
selected={selected}
|
|
93
|
+
onSelect={setSelected}
|
|
94
|
+
required
|
|
95
|
+
locale={ptBR}
|
|
96
|
+
disabled={{ before: today }}
|
|
97
|
+
startMonth={today}
|
|
98
|
+
endMonth={maxDate}
|
|
99
|
+
/>
|
|
100
|
+
</DayPickerWrapperStyled>
|
|
101
|
+
</Box>
|
|
102
|
+
|
|
103
|
+
{action && onAction && (
|
|
104
|
+
<CalendarFooterStyled>
|
|
105
|
+
<Calendaradix.Close>
|
|
106
|
+
<Button
|
|
107
|
+
variant='text'
|
|
108
|
+
color='brand'
|
|
109
|
+
onClick={onAction}
|
|
110
|
+
typography='buttonMedium'
|
|
111
|
+
fontWeight='medium'
|
|
112
|
+
>
|
|
113
|
+
{actionText ?? 'Aplicar'}
|
|
114
|
+
</Button>
|
|
115
|
+
</Calendaradix.Close>
|
|
116
|
+
</CalendarFooterStyled>
|
|
117
|
+
)}
|
|
118
|
+
</CalendarContentStyled>
|
|
119
|
+
</CalendarStyled>
|
|
120
|
+
</Calendaradix.Root>
|
|
121
|
+
)
|
|
122
|
+
}
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
import { Dialog as Calendaradix } from "@radix-ui/themes";
|
|
2
|
+
|
|
3
|
+
import { styled } from "../../styles"
|
|
4
|
+
|
|
5
|
+
export const CalendarStyled = styled('div', {
|
|
6
|
+
fontFamily: '$default',
|
|
7
|
+
lineHeight: '$base',
|
|
8
|
+
fontSize: '$14',
|
|
9
|
+
maxWidth: '200px',
|
|
10
|
+
borderRadius: '$sm',
|
|
11
|
+
})
|
|
12
|
+
|
|
13
|
+
export const CalendarContentStyled = styled(Calendaradix.Content, {
|
|
14
|
+
fontFamily: '$default',
|
|
15
|
+
lineHeight: '$base',
|
|
16
|
+
fontSize: '$14',
|
|
17
|
+
width: '100%',
|
|
18
|
+
maxWidth: 'fit-content',
|
|
19
|
+
border: '1px solid $neutral300',
|
|
20
|
+
borderRadius: '$sm',
|
|
21
|
+
boxShadow: '0px 2px 8px 0px $shadow50',
|
|
22
|
+
})
|
|
23
|
+
|
|
24
|
+
export const CalendarFooterStyled = styled('div', {
|
|
25
|
+
borderTop: '2px solid $neutral100',
|
|
26
|
+
padding: '$4 $16',
|
|
27
|
+
display: 'flex',
|
|
28
|
+
justifyContent: 'center',
|
|
29
|
+
alignItems: 'center',
|
|
30
|
+
height: '3rem',
|
|
31
|
+
})
|
|
32
|
+
|
|
33
|
+
export const DayPickerWrapperStyled = styled('div', {
|
|
34
|
+
'.rt-TextFieldInput': {
|
|
35
|
+
fontFamily: '$default',
|
|
36
|
+
fontSize: '$14',
|
|
37
|
+
color: '$dark500',
|
|
38
|
+
},
|
|
39
|
+
'.rdp-root': {
|
|
40
|
+
padding: '$16',
|
|
41
|
+
},
|
|
42
|
+
'.rdp-today .rdp-day_button': {
|
|
43
|
+
color: '$brand500',
|
|
44
|
+
textDecoration: 'underline',
|
|
45
|
+
},
|
|
46
|
+
'.rdp-day.rdp-disabled .rdp-day_button': {
|
|
47
|
+
color: '$dark400'
|
|
48
|
+
},
|
|
49
|
+
'.rdp-day_button': {
|
|
50
|
+
height: '32px',
|
|
51
|
+
width: '32px',
|
|
52
|
+
borderRadius: '$sm',
|
|
53
|
+
fontSize: '$14',
|
|
54
|
+
color: '$text',
|
|
55
|
+
backgroundColor: 'transparent',
|
|
56
|
+
border: '1px solid transparent',
|
|
57
|
+
transition: 'all 0.2s ease-in-out',
|
|
58
|
+
cursor: 'pointer',
|
|
59
|
+
},
|
|
60
|
+
'.rdp-day_button:hover': {
|
|
61
|
+
backgroundColor: '$dark100',
|
|
62
|
+
borderColor: '$brand500',
|
|
63
|
+
},
|
|
64
|
+
'.rdp-day.rdp-disabled .rdp-day_button:hover': {
|
|
65
|
+
backgroundColor: 'transparent',
|
|
66
|
+
borderColor: 'transparent',
|
|
67
|
+
},
|
|
68
|
+
'.rdp-nav': {
|
|
69
|
+
display: 'flex',
|
|
70
|
+
justifyContent: 'space-between',
|
|
71
|
+
width: '100%',
|
|
72
|
+
},
|
|
73
|
+
'.rdp-nav .rdp-chevron': {
|
|
74
|
+
display: 'none',
|
|
75
|
+
},
|
|
76
|
+
'.rdp-nav .rdp-button_previous': {
|
|
77
|
+
display: 'block',
|
|
78
|
+
backgroundImage: 'url("data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'32\'%20height=\'32\'%20viewBox=\'0%200%2032%2032\'%20fill=\'none\'%3E%3Cg%20transform=\'scale(-1,1)%20translate(-32,0)\'%3E%3Cpath%20d=\'M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z\'%20fill=\'white\'/%3E%3Cpath%20d=\'M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z\'%20fill=\'%23808289\'/%3E%3C/g%3E%3C/svg%3E")',
|
|
79
|
+
backgroundRepeat: 'no-repeat',
|
|
80
|
+
backgroundPosition: 'center',
|
|
81
|
+
backgroundSize: 'cover',
|
|
82
|
+
width: '32px',
|
|
83
|
+
height: '32px',
|
|
84
|
+
|
|
85
|
+
},
|
|
86
|
+
'.rdp-nav .rdp-button_next': {
|
|
87
|
+
display: 'block',
|
|
88
|
+
backgroundImage: 'url("data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'32\'%20height=\'32\'%20viewBox=\'0%200%2032%2032\'%20fill=\'none\'%3E%3Cpath%20d=\'M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z\'%20fill=\'white\'/%3E%3Cpath%20d=\'M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z\'%20fill=\'%23808289\'/%3E%3C/svg%3E")',
|
|
89
|
+
backgroundRepeat: 'no-repeat',
|
|
90
|
+
backgroundPosition: 'center',
|
|
91
|
+
backgroundSize: 'cover',
|
|
92
|
+
width: '32px',
|
|
93
|
+
height: '32px',
|
|
94
|
+
},
|
|
95
|
+
'.rdp-nav .rdp-button_previous:hover': {
|
|
96
|
+
backgroundImage: 'url("data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'32\'%20height=\'32\'%20viewBox=\'0%200%2032%2032\'%20fill=\'none\'%3E%3Cpath%20d=\'M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z\'%20fill=\'%23F4F4F4\'/%3E%3Cpath%20d=\'M12.2937%2015.2938C11.9031%2015.6844%2011.9031%2016.3188%2012.2937%2016.7094L17.2937%2021.7094C17.6844%2022.1%2018.3187%2022.1%2018.7094%2021.7094C19.1%2021.3188%2019.1%2020.6844%2018.7094%2020.2938L14.4156%2016L18.7062%2011.7063C19.0969%2011.3156%2019.0969%2010.6813%2018.7062%2010.2906C18.3156%209.90002%2017.6812%209.90002%2017.2906%2010.2906L12.2906%2015.2906L12.2937%2015.2938Z\'%20fill=\'%23808289\'/%3E%3C/svg%3E")',
|
|
97
|
+
transition: 'all 0.2s ease-in-out',
|
|
98
|
+
},
|
|
99
|
+
'.rdp-nav .rdp-button_next:hover': {
|
|
100
|
+
backgroundImage: 'url("data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'32\'%20height=\'32\'%20viewBox=\'0%200%2032%2032\'%20fill=\'none\'%3E%3Cpath%20d=\'M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z\'%20fill=\'%23F4F4F4\'/%3E%3Cpath%20d=\'M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z\'%20fill=\'%23808289\'/%3E%3C/svg%3E")',
|
|
101
|
+
transition: 'all 0.2s ease-in-out',
|
|
102
|
+
},
|
|
103
|
+
'.rdp-nav button': {
|
|
104
|
+
border: 'none',
|
|
105
|
+
backgroundColor: 'transparent',
|
|
106
|
+
cursor: 'pointer',
|
|
107
|
+
},
|
|
108
|
+
'.rdp-month': {
|
|
109
|
+
marginTop: '-24px',
|
|
110
|
+
},
|
|
111
|
+
'.rdp-month_caption': {
|
|
112
|
+
display: 'flex',
|
|
113
|
+
alignItems: 'center',
|
|
114
|
+
justifyContent: 'center',
|
|
115
|
+
width: 'calc(100% - 64px)',
|
|
116
|
+
margin: '0 auto',
|
|
117
|
+
columnGap: '12px',
|
|
118
|
+
},
|
|
119
|
+
'.rdp-dropdowns span, .rdp-caption_label': {
|
|
120
|
+
fontSize: '$16',
|
|
121
|
+
fontWeight: '$regular',
|
|
122
|
+
lineHeight: '$20',
|
|
123
|
+
textTransform: 'capitalize',
|
|
124
|
+
},
|
|
125
|
+
'.rdp-day.rdp-selected .rdp-day_button': {
|
|
126
|
+
backgroundColor: '$brand500',
|
|
127
|
+
color: '$neutral50',
|
|
128
|
+
borderColor: '$brand500',
|
|
129
|
+
},
|
|
130
|
+
'.rdp-dropdowns': {
|
|
131
|
+
display: 'flex',
|
|
132
|
+
alignItems: 'center',
|
|
133
|
+
justifyContent: 'center',
|
|
134
|
+
width: 'calc(100% - 64px)',
|
|
135
|
+
columnGap: '12px',
|
|
136
|
+
},
|
|
137
|
+
'.rdp-dropdowns .rdp-caption_label': {
|
|
138
|
+
display: 'none',
|
|
139
|
+
},
|
|
140
|
+
'.rdp-dropdown.rdp-months_dropdown, .rdp-dropdown.rdp-years_dropdown': {
|
|
141
|
+
border: 'none',
|
|
142
|
+
backgroundColor: 'transparent',
|
|
143
|
+
textTransform: 'capitalize',
|
|
144
|
+
height: '1.25rem',
|
|
145
|
+
position: 'relative',
|
|
146
|
+
fontFamily: '$default',
|
|
147
|
+
fontSize: '$16',
|
|
148
|
+
lineHeight: '1.25rem',
|
|
149
|
+
appearance: 'none',
|
|
150
|
+
WebkitAppearance: 'none',
|
|
151
|
+
MozAppearance: 'none',
|
|
152
|
+
paddingRight: '1.25rem',
|
|
153
|
+
zIndex: '3',
|
|
154
|
+
},
|
|
155
|
+
'.rdp-dropdown:focus, .rdp-dropdown:focus-visible, .rdp-dropdown:active': {
|
|
156
|
+
border: 'none',
|
|
157
|
+
outline: 'none',
|
|
158
|
+
boxShadow: 'none',
|
|
159
|
+
},
|
|
160
|
+
'.rdp-dropdown.rdp-months_dropdown:focus, .rdp-dropdown.rdp-years_dropdown:focus': {
|
|
161
|
+
border: 'none',
|
|
162
|
+
},
|
|
163
|
+
'.rdp-dropdown_root': {
|
|
164
|
+
position: 'relative'
|
|
165
|
+
},
|
|
166
|
+
'.rdp-dropdown_root::after': {
|
|
167
|
+
content: '',
|
|
168
|
+
height: '1.25rem',
|
|
169
|
+
width: '1.25rem',
|
|
170
|
+
position: 'absolute',
|
|
171
|
+
top: '0',
|
|
172
|
+
right: '0',
|
|
173
|
+
display: 'block',
|
|
174
|
+
backgroundColor: '$neutral50',
|
|
175
|
+
backgroundImage: 'url("data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'11\'%20height=\'20\'%20viewBox=\'0%200%2011%2020\'%20fill=\'none\'%3E%3Crect%20width=\'11\'%20height=\'20\'%20fill=\'white\'/%3E%3Cpath%20d=\'M5.9414%202.68359C5.69726%202.43945%205.30077%202.43945%205.05663%202.68359L2.55663%205.18359C2.37695%205.36328%202.32421%205.63086%202.42187%205.86523C2.51952%206.09961%202.74609%206.25195%202.99999%206.25195H7.99999C8.25195%206.25195%208.48046%206.09961%208.57812%205.86523C8.67578%205.63086%208.62109%205.36328%208.44335%205.18359L5.94335%202.68359H5.9414Z\'%20fill=\'%23808289\'/%3E%3Cpath%20d=\'M5.05858%2017.3164C5.30272%2017.5605%205.69921%2017.5605%205.94335%2017.3164L8.44335%2014.8164C8.62304%2014.6367%208.67577%2014.3691%208.57811%2014.1348C8.48046%2013.9004%208.25389%2013.748%207.99999%2013.748L2.99999%2013.75C2.74804%2013.75%202.51952%2013.9023%202.42186%2014.1367C2.32421%2014.3711%202.37889%2014.6387%202.55663%2014.8184L5.05663%2017.3184L5.05858%2017.3164Z\'%20fill=\'%23808289\'/%3E%3C/svg%3E")',
|
|
176
|
+
backgroundRepeat: 'no-repeat',
|
|
177
|
+
backgroundPosition: 'center',
|
|
178
|
+
borderRadius: '0.5rem',
|
|
179
|
+
zIndex: '2',
|
|
180
|
+
},
|
|
181
|
+
'.rdp-weekday': {
|
|
182
|
+
textTransform: 'uppercase',
|
|
183
|
+
fontWeight: '$regular',
|
|
184
|
+
fontSize: '0px',
|
|
185
|
+
|
|
186
|
+
},
|
|
187
|
+
'.rdp-weekday::first-letter': {
|
|
188
|
+
fontSize: '$14',
|
|
189
|
+
},
|
|
190
|
+
'.rdp-month_grid': {
|
|
191
|
+
marginTop: '$16',
|
|
192
|
+
paddingTop: '$16',
|
|
193
|
+
borderTop: '2px solid $neutral100',
|
|
194
|
+
},
|
|
195
|
+
})
|