@lets-events/react 12.10.13 → 12.10.14
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 +6 -6
- package/CHANGELOG.md +6 -0
- package/dist/index.d.mts +172 -4
- package/dist/index.d.ts +172 -4
- package/dist/index.js +2 -2
- package/dist/index.mjs +2 -2
- package/package.json +1 -1
- package/src/components/Alert.tsx +1 -1
- package/src/components/Flex.tsx +18 -6
- package/src/components/Text.tsx +18 -3
- package/src/components/TextField.tsx +1 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @lets-events/react@12.10.
|
|
2
|
+
> @lets-events/react@12.10.14 build
|
|
3
3
|
> tsup src/index.tsx --format esm,cjs --dts --external react
|
|
4
4
|
|
|
5
5
|
[34mCLI[39m Building entry: src/index.tsx
|
|
@@ -10,10 +10,10 @@
|
|
|
10
10
|
[34mESM[39m Build start
|
|
11
11
|
[34mCJS[39m Build start
|
|
12
12
|
[32mCJS[39m [1mdist\index.js [22m[32m432.14 KB[39m
|
|
13
|
-
[32mCJS[39m ⚡️ Build success in
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 266ms
|
|
14
14
|
[32mESM[39m [1mdist\index.mjs [22m[32m416.46 KB[39m
|
|
15
|
-
[32mESM[39m ⚡️ Build success in
|
|
15
|
+
[32mESM[39m ⚡️ Build success in 267ms
|
|
16
16
|
[34mDTS[39m Build start
|
|
17
|
-
[32mDTS[39m ⚡️ Build success in
|
|
18
|
-
[32mDTS[39m [1mdist\index.d.mts [22m[
|
|
19
|
-
[32mDTS[39m [1mdist\index.d.ts [22m[
|
|
17
|
+
[32mDTS[39m ⚡️ Build success in 5207ms
|
|
18
|
+
[32mDTS[39m [1mdist\index.d.mts [22m[32m409.13 KB[39m
|
|
19
|
+
[32mDTS[39m [1mdist\index.d.ts [22m[32m409.13 KB[39m
|
package/CHANGELOG.md
CHANGED
package/dist/index.d.mts
CHANGED
|
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
|
|
|
5
5
|
import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
|
|
6
6
|
import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
|
|
7
7
|
import * as React$1 from 'react';
|
|
8
|
-
import React__default, {
|
|
8
|
+
import React__default, { ElementType, ReactNode, CSSProperties, ComponentProps, MouseEvent, HTMLAttributes, JSX } from 'react';
|
|
9
9
|
import * as _radix_ui_themes from '@radix-ui/themes';
|
|
10
10
|
import { TextField as TextField$1, RadioGroup as RadioGroup$1, CheckboxGroup as CheckboxGroup$1, DropdownMenu as DropdownMenu$1, AlertDialog, Switch as Switch$1 } from '@radix-ui/themes';
|
|
11
11
|
import { Colors } from '@lets-events/tokens';
|
|
@@ -31,6 +31,148 @@ declare const Icon: {
|
|
|
31
31
|
};
|
|
32
32
|
};
|
|
33
33
|
|
|
34
|
+
declare const typographyValues: {
|
|
35
|
+
displayLarge: {
|
|
36
|
+
fontSize: string;
|
|
37
|
+
lineHeight: string;
|
|
38
|
+
letterSpacing: string;
|
|
39
|
+
};
|
|
40
|
+
displayMedium: {
|
|
41
|
+
fontSize: string;
|
|
42
|
+
lineHeight: string;
|
|
43
|
+
letterSpacing: string;
|
|
44
|
+
};
|
|
45
|
+
displaySmall: {
|
|
46
|
+
fontSize: string;
|
|
47
|
+
lineHeight: string;
|
|
48
|
+
letterSpacing: string;
|
|
49
|
+
};
|
|
50
|
+
headline1: {
|
|
51
|
+
fontSize: string;
|
|
52
|
+
lineHeight: string;
|
|
53
|
+
};
|
|
54
|
+
headline2: {
|
|
55
|
+
fontSize: string;
|
|
56
|
+
lineHeight: string;
|
|
57
|
+
};
|
|
58
|
+
headline3: {
|
|
59
|
+
fontSize: string;
|
|
60
|
+
lineHeight: string;
|
|
61
|
+
};
|
|
62
|
+
headline4: {
|
|
63
|
+
fontSize: string;
|
|
64
|
+
lineHeight: string;
|
|
65
|
+
};
|
|
66
|
+
headline5: {
|
|
67
|
+
fontSize: string;
|
|
68
|
+
lineHeight: string;
|
|
69
|
+
};
|
|
70
|
+
headline6: {
|
|
71
|
+
fontSize: string;
|
|
72
|
+
lineHeight: string;
|
|
73
|
+
};
|
|
74
|
+
headline7: {
|
|
75
|
+
fontSize: string;
|
|
76
|
+
lineHeight: string;
|
|
77
|
+
};
|
|
78
|
+
headline8: {
|
|
79
|
+
fontSize: string;
|
|
80
|
+
lineHeight: string;
|
|
81
|
+
};
|
|
82
|
+
bodyXL: {
|
|
83
|
+
fontSize: string;
|
|
84
|
+
lineHeight: string;
|
|
85
|
+
};
|
|
86
|
+
bodyL: {
|
|
87
|
+
fontSize: string;
|
|
88
|
+
lineHeight: string;
|
|
89
|
+
};
|
|
90
|
+
bodyM: {
|
|
91
|
+
fontSize: string;
|
|
92
|
+
lineHeight: string;
|
|
93
|
+
};
|
|
94
|
+
bodyS: {
|
|
95
|
+
fontSize: string;
|
|
96
|
+
lineHeight: string;
|
|
97
|
+
};
|
|
98
|
+
bodyXS: {
|
|
99
|
+
fontSize: string;
|
|
100
|
+
lineHeight: string;
|
|
101
|
+
};
|
|
102
|
+
bodyXXS: {
|
|
103
|
+
fontSize: string;
|
|
104
|
+
lineHeight: string;
|
|
105
|
+
};
|
|
106
|
+
badgeLarge: {
|
|
107
|
+
fontSize: string;
|
|
108
|
+
lineHeight: string;
|
|
109
|
+
};
|
|
110
|
+
badgeMedium: {
|
|
111
|
+
fontSize: string;
|
|
112
|
+
lineHeight: string;
|
|
113
|
+
};
|
|
114
|
+
badgeSmall: {
|
|
115
|
+
fontSize: string;
|
|
116
|
+
lineHeight: string;
|
|
117
|
+
};
|
|
118
|
+
badgeExtraSmall: {
|
|
119
|
+
fontSize: string;
|
|
120
|
+
lineHeight: string;
|
|
121
|
+
};
|
|
122
|
+
tooltip: {
|
|
123
|
+
fontSize: string;
|
|
124
|
+
lineHeight: string;
|
|
125
|
+
};
|
|
126
|
+
popoversRegular: {
|
|
127
|
+
fontSize: string;
|
|
128
|
+
lineHeight: string;
|
|
129
|
+
};
|
|
130
|
+
captionLarge: {
|
|
131
|
+
fontSize: string;
|
|
132
|
+
lineHeight: string;
|
|
133
|
+
};
|
|
134
|
+
captionMedium: {
|
|
135
|
+
fontSize: string;
|
|
136
|
+
lineHeight: string;
|
|
137
|
+
};
|
|
138
|
+
captionSmall: {
|
|
139
|
+
fontSize: string;
|
|
140
|
+
lineHeight: string;
|
|
141
|
+
};
|
|
142
|
+
buttonLarge: {
|
|
143
|
+
fontSize: string;
|
|
144
|
+
lineHeight: string;
|
|
145
|
+
};
|
|
146
|
+
buttonMedium: {
|
|
147
|
+
fontSize: string;
|
|
148
|
+
lineHeight: string;
|
|
149
|
+
};
|
|
150
|
+
buttonSmall: {
|
|
151
|
+
fontSize: string;
|
|
152
|
+
lineHeight: string;
|
|
153
|
+
};
|
|
154
|
+
buttonExtraSmall: {
|
|
155
|
+
fontSize: string;
|
|
156
|
+
lineHeight: string;
|
|
157
|
+
};
|
|
158
|
+
labelLarge: {
|
|
159
|
+
fontSize: string;
|
|
160
|
+
lineHeight: string;
|
|
161
|
+
};
|
|
162
|
+
labelMedium: {
|
|
163
|
+
fontSize: string;
|
|
164
|
+
lineHeight: string;
|
|
165
|
+
};
|
|
166
|
+
labelSmall: {
|
|
167
|
+
fontSize: string;
|
|
168
|
+
lineHeight: string;
|
|
169
|
+
};
|
|
170
|
+
labelExtraSmall: {
|
|
171
|
+
fontSize: string;
|
|
172
|
+
lineHeight: string;
|
|
173
|
+
};
|
|
174
|
+
};
|
|
175
|
+
|
|
34
176
|
declare const TextStyle: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<_radix_ui_themes.TextProps & React$1.RefAttributes<HTMLSpanElement>>, {
|
|
35
177
|
typography?: "tooltip" | "displayLarge" | "displayMedium" | "displaySmall" | "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headline7" | "headline8" | "bodyXL" | "bodyL" | "bodyM" | "bodyS" | "bodyXS" | "bodyXXS" | "badgeLarge" | "badgeMedium" | "badgeSmall" | "badgeExtraSmall" | "popoversRegular" | "captionLarge" | "captionMedium" | "captionSmall" | "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | "labelLarge" | "labelMedium" | "labelSmall" | "labelExtraSmall" | undefined;
|
|
36
178
|
fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
|
|
@@ -408,10 +550,24 @@ declare const TextStyle: _stitches_react_types_styled_component.StyledComponent<
|
|
|
408
550
|
transition: "transitions";
|
|
409
551
|
zIndex: "zIndices";
|
|
410
552
|
}, {}>>;
|
|
411
|
-
type
|
|
553
|
+
type Typography = keyof typeof typographyValues;
|
|
554
|
+
type FontWeight = "regular" | "medium" | "semibold" | "bold";
|
|
555
|
+
type TextProps = {
|
|
412
556
|
as?: ElementType;
|
|
413
557
|
asChild?: boolean;
|
|
414
558
|
color?: keyof Colors;
|
|
559
|
+
typography?: Typography;
|
|
560
|
+
fontWeight?: FontWeight;
|
|
561
|
+
children?: ReactNode;
|
|
562
|
+
id?: string;
|
|
563
|
+
role?: string;
|
|
564
|
+
"aria-label"?: string;
|
|
565
|
+
"aria-labelledby"?: string;
|
|
566
|
+
"aria-describedby"?: string;
|
|
567
|
+
"aria-hidden"?: boolean | "true" | "false";
|
|
568
|
+
className?: string;
|
|
569
|
+
style?: CSSProperties;
|
|
570
|
+
css?: ComponentProps<typeof TextStyle>["css"];
|
|
415
571
|
};
|
|
416
572
|
declare function Text({ color, ...props }: TextProps): react_jsx_runtime.JSX.Element;
|
|
417
573
|
|
|
@@ -13154,9 +13310,21 @@ declare const FlexStyled: _stitches_react_types_styled_component.StyledComponent
|
|
|
13154
13310
|
transition: "transitions";
|
|
13155
13311
|
zIndex: "zIndices";
|
|
13156
13312
|
}, {}>>;
|
|
13157
|
-
type
|
|
13313
|
+
type StitchesFlexProps = ComponentProps<typeof FlexStyled>;
|
|
13314
|
+
type GapValue = NonNullable<StitchesFlexProps['gap']>;
|
|
13315
|
+
type FlexProps = {
|
|
13158
13316
|
as?: ElementType;
|
|
13159
|
-
children:
|
|
13317
|
+
children: ReactNode;
|
|
13318
|
+
display?: 'flex' | 'inline-flex';
|
|
13319
|
+
align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
|
|
13320
|
+
justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
|
|
13321
|
+
direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
|
|
13322
|
+
gap?: GapValue;
|
|
13323
|
+
gapX?: Exclude<GapValue, 0 | '0'>;
|
|
13324
|
+
gapY?: Exclude<GapValue, 0 | '0'>;
|
|
13325
|
+
className?: string;
|
|
13326
|
+
style?: CSSProperties;
|
|
13327
|
+
css?: StitchesFlexProps['css'];
|
|
13160
13328
|
};
|
|
13161
13329
|
declare function Flex({ children, ...props }: FlexProps): react_jsx_runtime.JSX.Element;
|
|
13162
13330
|
|
package/dist/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
|
|
|
5
5
|
import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
|
|
6
6
|
import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
|
|
7
7
|
import * as React$1 from 'react';
|
|
8
|
-
import React__default, {
|
|
8
|
+
import React__default, { ElementType, ReactNode, CSSProperties, ComponentProps, MouseEvent, HTMLAttributes, JSX } from 'react';
|
|
9
9
|
import * as _radix_ui_themes from '@radix-ui/themes';
|
|
10
10
|
import { TextField as TextField$1, RadioGroup as RadioGroup$1, CheckboxGroup as CheckboxGroup$1, DropdownMenu as DropdownMenu$1, AlertDialog, Switch as Switch$1 } from '@radix-ui/themes';
|
|
11
11
|
import { Colors } from '@lets-events/tokens';
|
|
@@ -31,6 +31,148 @@ declare const Icon: {
|
|
|
31
31
|
};
|
|
32
32
|
};
|
|
33
33
|
|
|
34
|
+
declare const typographyValues: {
|
|
35
|
+
displayLarge: {
|
|
36
|
+
fontSize: string;
|
|
37
|
+
lineHeight: string;
|
|
38
|
+
letterSpacing: string;
|
|
39
|
+
};
|
|
40
|
+
displayMedium: {
|
|
41
|
+
fontSize: string;
|
|
42
|
+
lineHeight: string;
|
|
43
|
+
letterSpacing: string;
|
|
44
|
+
};
|
|
45
|
+
displaySmall: {
|
|
46
|
+
fontSize: string;
|
|
47
|
+
lineHeight: string;
|
|
48
|
+
letterSpacing: string;
|
|
49
|
+
};
|
|
50
|
+
headline1: {
|
|
51
|
+
fontSize: string;
|
|
52
|
+
lineHeight: string;
|
|
53
|
+
};
|
|
54
|
+
headline2: {
|
|
55
|
+
fontSize: string;
|
|
56
|
+
lineHeight: string;
|
|
57
|
+
};
|
|
58
|
+
headline3: {
|
|
59
|
+
fontSize: string;
|
|
60
|
+
lineHeight: string;
|
|
61
|
+
};
|
|
62
|
+
headline4: {
|
|
63
|
+
fontSize: string;
|
|
64
|
+
lineHeight: string;
|
|
65
|
+
};
|
|
66
|
+
headline5: {
|
|
67
|
+
fontSize: string;
|
|
68
|
+
lineHeight: string;
|
|
69
|
+
};
|
|
70
|
+
headline6: {
|
|
71
|
+
fontSize: string;
|
|
72
|
+
lineHeight: string;
|
|
73
|
+
};
|
|
74
|
+
headline7: {
|
|
75
|
+
fontSize: string;
|
|
76
|
+
lineHeight: string;
|
|
77
|
+
};
|
|
78
|
+
headline8: {
|
|
79
|
+
fontSize: string;
|
|
80
|
+
lineHeight: string;
|
|
81
|
+
};
|
|
82
|
+
bodyXL: {
|
|
83
|
+
fontSize: string;
|
|
84
|
+
lineHeight: string;
|
|
85
|
+
};
|
|
86
|
+
bodyL: {
|
|
87
|
+
fontSize: string;
|
|
88
|
+
lineHeight: string;
|
|
89
|
+
};
|
|
90
|
+
bodyM: {
|
|
91
|
+
fontSize: string;
|
|
92
|
+
lineHeight: string;
|
|
93
|
+
};
|
|
94
|
+
bodyS: {
|
|
95
|
+
fontSize: string;
|
|
96
|
+
lineHeight: string;
|
|
97
|
+
};
|
|
98
|
+
bodyXS: {
|
|
99
|
+
fontSize: string;
|
|
100
|
+
lineHeight: string;
|
|
101
|
+
};
|
|
102
|
+
bodyXXS: {
|
|
103
|
+
fontSize: string;
|
|
104
|
+
lineHeight: string;
|
|
105
|
+
};
|
|
106
|
+
badgeLarge: {
|
|
107
|
+
fontSize: string;
|
|
108
|
+
lineHeight: string;
|
|
109
|
+
};
|
|
110
|
+
badgeMedium: {
|
|
111
|
+
fontSize: string;
|
|
112
|
+
lineHeight: string;
|
|
113
|
+
};
|
|
114
|
+
badgeSmall: {
|
|
115
|
+
fontSize: string;
|
|
116
|
+
lineHeight: string;
|
|
117
|
+
};
|
|
118
|
+
badgeExtraSmall: {
|
|
119
|
+
fontSize: string;
|
|
120
|
+
lineHeight: string;
|
|
121
|
+
};
|
|
122
|
+
tooltip: {
|
|
123
|
+
fontSize: string;
|
|
124
|
+
lineHeight: string;
|
|
125
|
+
};
|
|
126
|
+
popoversRegular: {
|
|
127
|
+
fontSize: string;
|
|
128
|
+
lineHeight: string;
|
|
129
|
+
};
|
|
130
|
+
captionLarge: {
|
|
131
|
+
fontSize: string;
|
|
132
|
+
lineHeight: string;
|
|
133
|
+
};
|
|
134
|
+
captionMedium: {
|
|
135
|
+
fontSize: string;
|
|
136
|
+
lineHeight: string;
|
|
137
|
+
};
|
|
138
|
+
captionSmall: {
|
|
139
|
+
fontSize: string;
|
|
140
|
+
lineHeight: string;
|
|
141
|
+
};
|
|
142
|
+
buttonLarge: {
|
|
143
|
+
fontSize: string;
|
|
144
|
+
lineHeight: string;
|
|
145
|
+
};
|
|
146
|
+
buttonMedium: {
|
|
147
|
+
fontSize: string;
|
|
148
|
+
lineHeight: string;
|
|
149
|
+
};
|
|
150
|
+
buttonSmall: {
|
|
151
|
+
fontSize: string;
|
|
152
|
+
lineHeight: string;
|
|
153
|
+
};
|
|
154
|
+
buttonExtraSmall: {
|
|
155
|
+
fontSize: string;
|
|
156
|
+
lineHeight: string;
|
|
157
|
+
};
|
|
158
|
+
labelLarge: {
|
|
159
|
+
fontSize: string;
|
|
160
|
+
lineHeight: string;
|
|
161
|
+
};
|
|
162
|
+
labelMedium: {
|
|
163
|
+
fontSize: string;
|
|
164
|
+
lineHeight: string;
|
|
165
|
+
};
|
|
166
|
+
labelSmall: {
|
|
167
|
+
fontSize: string;
|
|
168
|
+
lineHeight: string;
|
|
169
|
+
};
|
|
170
|
+
labelExtraSmall: {
|
|
171
|
+
fontSize: string;
|
|
172
|
+
lineHeight: string;
|
|
173
|
+
};
|
|
174
|
+
};
|
|
175
|
+
|
|
34
176
|
declare const TextStyle: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<_radix_ui_themes.TextProps & React$1.RefAttributes<HTMLSpanElement>>, {
|
|
35
177
|
typography?: "tooltip" | "displayLarge" | "displayMedium" | "displaySmall" | "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headline7" | "headline8" | "bodyXL" | "bodyL" | "bodyM" | "bodyS" | "bodyXS" | "bodyXXS" | "badgeLarge" | "badgeMedium" | "badgeSmall" | "badgeExtraSmall" | "popoversRegular" | "captionLarge" | "captionMedium" | "captionSmall" | "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | "labelLarge" | "labelMedium" | "labelSmall" | "labelExtraSmall" | undefined;
|
|
36
178
|
fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
|
|
@@ -408,10 +550,24 @@ declare const TextStyle: _stitches_react_types_styled_component.StyledComponent<
|
|
|
408
550
|
transition: "transitions";
|
|
409
551
|
zIndex: "zIndices";
|
|
410
552
|
}, {}>>;
|
|
411
|
-
type
|
|
553
|
+
type Typography = keyof typeof typographyValues;
|
|
554
|
+
type FontWeight = "regular" | "medium" | "semibold" | "bold";
|
|
555
|
+
type TextProps = {
|
|
412
556
|
as?: ElementType;
|
|
413
557
|
asChild?: boolean;
|
|
414
558
|
color?: keyof Colors;
|
|
559
|
+
typography?: Typography;
|
|
560
|
+
fontWeight?: FontWeight;
|
|
561
|
+
children?: ReactNode;
|
|
562
|
+
id?: string;
|
|
563
|
+
role?: string;
|
|
564
|
+
"aria-label"?: string;
|
|
565
|
+
"aria-labelledby"?: string;
|
|
566
|
+
"aria-describedby"?: string;
|
|
567
|
+
"aria-hidden"?: boolean | "true" | "false";
|
|
568
|
+
className?: string;
|
|
569
|
+
style?: CSSProperties;
|
|
570
|
+
css?: ComponentProps<typeof TextStyle>["css"];
|
|
415
571
|
};
|
|
416
572
|
declare function Text({ color, ...props }: TextProps): react_jsx_runtime.JSX.Element;
|
|
417
573
|
|
|
@@ -13154,9 +13310,21 @@ declare const FlexStyled: _stitches_react_types_styled_component.StyledComponent
|
|
|
13154
13310
|
transition: "transitions";
|
|
13155
13311
|
zIndex: "zIndices";
|
|
13156
13312
|
}, {}>>;
|
|
13157
|
-
type
|
|
13313
|
+
type StitchesFlexProps = ComponentProps<typeof FlexStyled>;
|
|
13314
|
+
type GapValue = NonNullable<StitchesFlexProps['gap']>;
|
|
13315
|
+
type FlexProps = {
|
|
13158
13316
|
as?: ElementType;
|
|
13159
|
-
children:
|
|
13317
|
+
children: ReactNode;
|
|
13318
|
+
display?: 'flex' | 'inline-flex';
|
|
13319
|
+
align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
|
|
13320
|
+
justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
|
|
13321
|
+
direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
|
|
13322
|
+
gap?: GapValue;
|
|
13323
|
+
gapX?: Exclude<GapValue, 0 | '0'>;
|
|
13324
|
+
gapY?: Exclude<GapValue, 0 | '0'>;
|
|
13325
|
+
className?: string;
|
|
13326
|
+
style?: CSSProperties;
|
|
13327
|
+
css?: StitchesFlexProps['css'];
|
|
13160
13328
|
};
|
|
13161
13329
|
declare function Flex({ children, ...props }: FlexProps): react_jsx_runtime.JSX.Element;
|
|
13162
13330
|
|
package/dist/index.js
CHANGED
|
@@ -2881,7 +2881,7 @@ var TextField = import_react3.default.forwardRef(
|
|
|
2881
2881
|
onInput == null ? void 0 : onInput(e);
|
|
2882
2882
|
};
|
|
2883
2883
|
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex, { direction: "column", css: { width: "100%", position: "relative" }, children: [
|
|
2884
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex, { gap:
|
|
2884
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex, { gap: 0, css: { width: "100%" }, children: [
|
|
2885
2885
|
!!addon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2886
2886
|
InputAddon,
|
|
2887
2887
|
{
|
|
@@ -9424,7 +9424,7 @@ function Alert(_a) {
|
|
|
9424
9424
|
] })
|
|
9425
9425
|
] }),
|
|
9426
9426
|
completAlert.onAction || completAlert.cancel ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialoghrStyled, {}) : null,
|
|
9427
|
-
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialogRowStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Flex, {
|
|
9427
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialogRowStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Flex, { justify: "end", css: { width: "100%" }, children: [
|
|
9428
9428
|
completAlert.onAction && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes13.AlertDialog.Action, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
9429
9429
|
Button,
|
|
9430
9430
|
{
|
package/dist/index.mjs
CHANGED
|
@@ -2760,7 +2760,7 @@ var TextField = React.forwardRef(
|
|
|
2760
2760
|
onInput == null ? void 0 : onInput(e);
|
|
2761
2761
|
};
|
|
2762
2762
|
return /* @__PURE__ */ jsxs2(Flex, { direction: "column", css: { width: "100%", position: "relative" }, children: [
|
|
2763
|
-
/* @__PURE__ */ jsxs2(Flex, { gap:
|
|
2763
|
+
/* @__PURE__ */ jsxs2(Flex, { gap: 0, css: { width: "100%" }, children: [
|
|
2764
2764
|
!!addon && /* @__PURE__ */ jsx7(
|
|
2765
2765
|
InputAddon,
|
|
2766
2766
|
{
|
|
@@ -9307,7 +9307,7 @@ function Alert(_a) {
|
|
|
9307
9307
|
] })
|
|
9308
9308
|
] }),
|
|
9309
9309
|
completAlert.onAction || completAlert.cancel ? /* @__PURE__ */ jsx19(AlertDialoghrStyled, {}) : null,
|
|
9310
|
-
/* @__PURE__ */ jsx19(AlertDialogRowStyled, { children: /* @__PURE__ */ jsxs11(Flex, {
|
|
9310
|
+
/* @__PURE__ */ jsx19(AlertDialogRowStyled, { children: /* @__PURE__ */ jsxs11(Flex, { justify: "end", css: { width: "100%" }, children: [
|
|
9311
9311
|
completAlert.onAction && /* @__PURE__ */ jsx19(AlertDialog.Action, { children: /* @__PURE__ */ jsx19(
|
|
9312
9312
|
Button,
|
|
9313
9313
|
{
|
package/package.json
CHANGED
package/src/components/Alert.tsx
CHANGED
|
@@ -274,7 +274,7 @@ export function Alert({
|
|
|
274
274
|
<AlertDialoghrStyled />
|
|
275
275
|
) : null}
|
|
276
276
|
<AlertDialogRowStyled>
|
|
277
|
-
<Flex
|
|
277
|
+
<Flex justify="end" css={{ width: "100%" }}>
|
|
278
278
|
{completAlert.onAction && (
|
|
279
279
|
<AlertDialog.Action>
|
|
280
280
|
<Button
|
package/src/components/Flex.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ComponentProps, ElementType } from 'react';
|
|
1
|
+
import { ComponentProps, CSSProperties, ElementType, ReactNode } from 'react';
|
|
2
2
|
import { styled } from '../styles'
|
|
3
3
|
import { Flex as FlexRadix } from "@radix-ui/themes";
|
|
4
4
|
export const FlexStyled = styled(FlexRadix, {
|
|
@@ -104,15 +104,27 @@ export const FlexStyled = styled(FlexRadix, {
|
|
|
104
104
|
|
|
105
105
|
})
|
|
106
106
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
children: React.ReactNode
|
|
110
|
-
}
|
|
107
|
+
type StitchesFlexProps = ComponentProps<typeof FlexStyled>;
|
|
108
|
+
type GapValue = NonNullable<StitchesFlexProps['gap']>;
|
|
111
109
|
|
|
110
|
+
export type FlexProps = {
|
|
111
|
+
as?: ElementType;
|
|
112
|
+
children: ReactNode;
|
|
113
|
+
display?: 'flex' | 'inline-flex';
|
|
114
|
+
align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
|
|
115
|
+
justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
|
|
116
|
+
direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
|
|
117
|
+
gap?: GapValue;
|
|
118
|
+
gapX?: Exclude<GapValue, 0 | '0'>;
|
|
119
|
+
gapY?: Exclude<GapValue, 0 | '0'>;
|
|
120
|
+
className?: string;
|
|
121
|
+
style?: CSSProperties;
|
|
122
|
+
css?: StitchesFlexProps['css'];
|
|
123
|
+
};
|
|
112
124
|
|
|
113
125
|
export function Flex({ children, ...props }: FlexProps) {
|
|
114
126
|
return (
|
|
115
|
-
<FlexStyled {...props}>
|
|
127
|
+
<FlexStyled {...(props as ComponentProps<typeof FlexStyled>)}>
|
|
116
128
|
{children}
|
|
117
129
|
</FlexStyled>
|
|
118
130
|
)
|
package/src/components/Text.tsx
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { ComponentProps, ElementType } from "react";
|
|
1
|
+
import { ComponentProps, CSSProperties, ElementType, ReactNode } from "react";
|
|
2
2
|
import { styled } from "../styles";
|
|
3
3
|
import { Text as TextRadix } from "@radix-ui/themes";
|
|
4
4
|
import { typographyValues } from "../types/typographyValues";
|
|
5
5
|
|
|
6
|
-
import {
|
|
6
|
+
import { Colors } from "@lets-events/tokens";
|
|
7
7
|
|
|
8
8
|
export const TextStyle = styled(TextRadix, {
|
|
9
9
|
fontFamily: "$default",
|
|
@@ -19,10 +19,25 @@ export const TextStyle = styled(TextRadix, {
|
|
|
19
19
|
},
|
|
20
20
|
});
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
type Typography = keyof typeof typographyValues;
|
|
23
|
+
type FontWeight = "regular" | "medium" | "semibold" | "bold";
|
|
24
|
+
|
|
25
|
+
export type TextProps = {
|
|
23
26
|
as?: ElementType;
|
|
24
27
|
asChild?: boolean;
|
|
25
28
|
color?: keyof Colors;
|
|
29
|
+
typography?: Typography;
|
|
30
|
+
fontWeight?: FontWeight;
|
|
31
|
+
children?: ReactNode;
|
|
32
|
+
id?: string;
|
|
33
|
+
role?: string;
|
|
34
|
+
"aria-label"?: string;
|
|
35
|
+
"aria-labelledby"?: string;
|
|
36
|
+
"aria-describedby"?: string;
|
|
37
|
+
"aria-hidden"?: boolean | "true" | "false";
|
|
38
|
+
className?: string;
|
|
39
|
+
style?: CSSProperties;
|
|
40
|
+
css?: ComponentProps<typeof TextStyle>["css"];
|
|
26
41
|
};
|
|
27
42
|
|
|
28
43
|
export function Text({ color, ...props }: TextProps) {
|
|
@@ -329,7 +329,7 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
|
|
|
329
329
|
|
|
330
330
|
return (
|
|
331
331
|
<Flex direction="column" css={{ width: "100%", position: "relative" }}>
|
|
332
|
-
<Flex gap={
|
|
332
|
+
<Flex gap={0} css={{ width: "100%" }}>
|
|
333
333
|
{!!addon && (
|
|
334
334
|
<InputAddon
|
|
335
335
|
color={hasError ? "error" : color}
|