@lets-events/react 3.0.0 → 4.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.
- package/.turbo/turbo-build.log +8 -8
- package/CHANGELOG.md +6 -0
- package/dist/index.d.mts +409 -22
- package/dist/index.d.ts +409 -22
- package/dist/index.js +837 -149
- package/dist/index.mjs +835 -149
- package/package.json +1 -1
- package/src/components/Badge.tsx +121 -0
- package/src/components/BadgeText.tsx +5 -0
- package/src/components/Button.tsx +266 -89
- package/src/components/ButtonGroup.tsx +378 -28
- package/src/components/CheckboxGroup.tsx +14 -9
- package/src/components/Icon.tsx +15 -4
- package/src/components/RadioGroup.tsx +14 -12
- package/src/components/TextField.tsx +40 -9
- package/src/index.tsx +1 -0
|
@@ -34,13 +34,42 @@ export const TextFieldStyled = styled(TextFieldRadix.Root, {
|
|
|
34
34
|
cursor: 'not-allowed',
|
|
35
35
|
},
|
|
36
36
|
variants: {
|
|
37
|
+
color: {
|
|
38
|
+
default: {
|
|
39
|
+
color: '$dark400',
|
|
40
|
+
border: '1px solid $dark200',
|
|
41
|
+
'&:has(input:focus)': {
|
|
42
|
+
border: '2px solid $brand300',
|
|
43
|
+
},
|
|
44
|
+
'&:has(input:disabled)': {
|
|
45
|
+
backgroundColor: '$dark100',
|
|
46
|
+
color: '$dark400',
|
|
47
|
+
border: '1px solid $dark200',
|
|
48
|
+
cursor: 'not-allowed',
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
error:{
|
|
52
|
+
border: '1px solid $error400',
|
|
53
|
+
color: '$error400',
|
|
54
|
+
'input::placeholder': {
|
|
55
|
+
color: '$error400',
|
|
56
|
+
},
|
|
57
|
+
'& hast(input:focus)': {
|
|
58
|
+
border: '2px solid $error400',
|
|
59
|
+
},
|
|
60
|
+
'&:has(input:disabled)': {
|
|
61
|
+
backgroundColor: '$error50',
|
|
62
|
+
color: '$error300',
|
|
63
|
+
border: '1px solid $error100',
|
|
64
|
+
cursor: 'not-allowed',
|
|
65
|
+
},
|
|
66
|
+
},
|
|
67
|
+
|
|
68
|
+
},
|
|
37
69
|
isValid: {
|
|
38
70
|
true: {},
|
|
39
71
|
false: {
|
|
40
|
-
|
|
41
|
-
color: '$error400',
|
|
42
|
-
backgroundColor: '$error50',
|
|
43
|
-
}
|
|
72
|
+
}
|
|
44
73
|
},
|
|
45
74
|
},
|
|
46
75
|
|
|
@@ -101,25 +130,27 @@ export type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
|
|
|
101
130
|
name?: string,
|
|
102
131
|
}
|
|
103
132
|
|
|
104
|
-
export type TextFieldSlotProps = ComponentProps<typeof TextFieldStyled> & {
|
|
133
|
+
export type TextFieldSlotProps = Omit<ComponentProps<typeof TextFieldStyled>, 'color'> & {
|
|
105
134
|
placeholder?: string
|
|
106
135
|
children?: React.ReactNode
|
|
107
136
|
position?: 'flex-start' | 'flex-end'
|
|
108
137
|
onClick?: () => void,
|
|
138
|
+
color?: "error" | "success" | undefined
|
|
109
139
|
}
|
|
110
140
|
|
|
111
141
|
export function TextField({
|
|
112
142
|
children,
|
|
113
143
|
isValid,
|
|
114
144
|
name,
|
|
145
|
+
color,
|
|
115
146
|
...props
|
|
116
147
|
}: TextFieldProps) {
|
|
117
148
|
|
|
118
149
|
return (
|
|
119
|
-
<TextFieldStyled isValid={isValid} name={name} {...props}>
|
|
150
|
+
<TextFieldStyled color={color} isValid={isValid} name={name} {...props}>
|
|
120
151
|
{children}
|
|
121
152
|
{isValid && (
|
|
122
|
-
<TextFieldSlot position='flex-end' name={name}>
|
|
153
|
+
<TextFieldSlot position='flex-end' name={name} color={color as TextFieldSlotProps['color']}>
|
|
123
154
|
<Icon name='check' />
|
|
124
155
|
</TextFieldSlot>
|
|
125
156
|
)}
|
|
@@ -139,7 +170,7 @@ export function TextFieldSlot({
|
|
|
139
170
|
<>
|
|
140
171
|
{
|
|
141
172
|
!!onClick ?
|
|
142
|
-
<TextFieldSlotStyled {...props} style={{
|
|
173
|
+
<TextFieldSlotStyled {...{ ...props, color: undefined }} style={{
|
|
143
174
|
position: 'absolute',
|
|
144
175
|
left: position === 'flex-end' ? 'none' : 15,
|
|
145
176
|
right: position === 'flex-start' ? 'none' : 15,
|
|
@@ -149,7 +180,7 @@ export function TextFieldSlot({
|
|
|
149
180
|
cursor: 'pointer',
|
|
150
181
|
}} onClick={() => onClick()}>{children}</TextFieldSlotStyled>
|
|
151
182
|
:
|
|
152
|
-
<TextFieldSlotStyled {...props} style={{
|
|
183
|
+
<TextFieldSlotStyled {...{ ...props, color: undefined }} style={{
|
|
153
184
|
float: position === 'flex-start' ? 'left' : 'right',
|
|
154
185
|
order: position === 'flex-start' ? 0 : 2,
|
|
155
186
|
marginLeft: position === 'flex-start' ? 0 : 15,
|