@lets-events/react 12.10.12 → 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 +8 -8
- package/CHANGELOG.md +12 -0
- package/dist/index.d.mts +172 -4
- package/dist/index.d.ts +172 -4
- package/dist/index.js +7 -9
- package/dist/index.mjs +7 -9
- package/package.json +1 -1
- package/src/components/Alert.tsx +1 -1
- package/src/components/Flex.tsx +18 -6
- package/src/components/Modal.tsx +1 -1
- 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
|
|
@@ -9,11 +9,11 @@
|
|
|
9
9
|
[34mCLI[39m Target: es6
|
|
10
10
|
[34mESM[39m Build start
|
|
11
11
|
[34mCJS[39m Build start
|
|
12
|
-
[
|
|
13
|
-
[
|
|
14
|
-
[
|
|
15
|
-
[
|
|
12
|
+
[32mCJS[39m [1mdist\index.js [22m[32m432.14 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 266ms
|
|
14
|
+
[32mESM[39m [1mdist\index.mjs [22m[32m416.46 KB[39m
|
|
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
|
{
|
|
@@ -3829,12 +3829,6 @@ function Badge(_a) {
|
|
|
3829
3829
|
|
|
3830
3830
|
// src/components/Modal.tsx
|
|
3831
3831
|
var import_radix_ui = require("radix-ui");
|
|
3832
|
-
|
|
3833
|
-
// src/components/Box.tsx
|
|
3834
|
-
var import_themes12 = require("@radix-ui/themes");
|
|
3835
|
-
var Box = import_themes12.Box;
|
|
3836
|
-
|
|
3837
|
-
// src/components/Modal.tsx
|
|
3838
3832
|
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
3839
3833
|
var ModalContentStyled = styled(import_radix_ui.Dialog.Content, {
|
|
3840
3834
|
fontFamily: "$default",
|
|
@@ -3919,7 +3913,7 @@ function Modal(_a) {
|
|
|
3919
3913
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalTitleStyled, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { typography: "headline6", fontWeight: "medium", children: title }) }),
|
|
3920
3914
|
(onOpenChange || trigger) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui.Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalIconClose, { name: "close", size: "xl" }) })
|
|
3921
3915
|
] }),
|
|
3922
|
-
|
|
3916
|
+
children
|
|
3923
3917
|
]
|
|
3924
3918
|
}
|
|
3925
3919
|
)
|
|
@@ -7904,6 +7898,10 @@ function cleanEscapedString2(input) {
|
|
|
7904
7898
|
return input.match(escapedStringRegExp2)[1].replace(doubleQuoteRegExp2, "'");
|
|
7905
7899
|
}
|
|
7906
7900
|
|
|
7901
|
+
// src/components/Box.tsx
|
|
7902
|
+
var import_themes12 = require("@radix-ui/themes");
|
|
7903
|
+
var Box = import_themes12.Box;
|
|
7904
|
+
|
|
7907
7905
|
// src/components/Calendar/styledComponents.ts
|
|
7908
7906
|
var CalendarStyled = styled("div", {
|
|
7909
7907
|
fontFamily: "$default",
|
|
@@ -9426,7 +9424,7 @@ function Alert(_a) {
|
|
|
9426
9424
|
] })
|
|
9427
9425
|
] }),
|
|
9428
9426
|
completAlert.onAction || completAlert.cancel ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialoghrStyled, {}) : null,
|
|
9429
|
-
/* @__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: [
|
|
9430
9428
|
completAlert.onAction && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes13.AlertDialog.Action, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
9431
9429
|
Button,
|
|
9432
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
|
{
|
|
@@ -3712,12 +3712,6 @@ function Badge(_a) {
|
|
|
3712
3712
|
|
|
3713
3713
|
// src/components/Modal.tsx
|
|
3714
3714
|
import { Dialog as ModalRadix } from "radix-ui";
|
|
3715
|
-
|
|
3716
|
-
// src/components/Box.tsx
|
|
3717
|
-
import { Box as BoxRadix } from "@radix-ui/themes";
|
|
3718
|
-
var Box = BoxRadix;
|
|
3719
|
-
|
|
3720
|
-
// src/components/Modal.tsx
|
|
3721
3715
|
import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
3722
3716
|
var ModalContentStyled = styled(ModalRadix.Content, {
|
|
3723
3717
|
fontFamily: "$default",
|
|
@@ -3802,7 +3796,7 @@ function Modal(_a) {
|
|
|
3802
3796
|
/* @__PURE__ */ jsx13(ModalTitleStyled, { asChild: true, children: /* @__PURE__ */ jsx13(Text, { typography: "headline6", fontWeight: "medium", children: title }) }),
|
|
3803
3797
|
(onOpenChange || trigger) && /* @__PURE__ */ jsx13(ModalRadix.Close, { asChild: true, children: /* @__PURE__ */ jsx13(ModalIconClose, { name: "close", size: "xl" }) })
|
|
3804
3798
|
] }),
|
|
3805
|
-
|
|
3799
|
+
children
|
|
3806
3800
|
]
|
|
3807
3801
|
}
|
|
3808
3802
|
)
|
|
@@ -7787,6 +7781,10 @@ function cleanEscapedString2(input) {
|
|
|
7787
7781
|
return input.match(escapedStringRegExp2)[1].replace(doubleQuoteRegExp2, "'");
|
|
7788
7782
|
}
|
|
7789
7783
|
|
|
7784
|
+
// src/components/Box.tsx
|
|
7785
|
+
import { Box as BoxRadix } from "@radix-ui/themes";
|
|
7786
|
+
var Box = BoxRadix;
|
|
7787
|
+
|
|
7790
7788
|
// src/components/Calendar/styledComponents.ts
|
|
7791
7789
|
var CalendarStyled = styled("div", {
|
|
7792
7790
|
fontFamily: "$default",
|
|
@@ -9309,7 +9307,7 @@ function Alert(_a) {
|
|
|
9309
9307
|
] })
|
|
9310
9308
|
] }),
|
|
9311
9309
|
completAlert.onAction || completAlert.cancel ? /* @__PURE__ */ jsx19(AlertDialoghrStyled, {}) : null,
|
|
9312
|
-
/* @__PURE__ */ jsx19(AlertDialogRowStyled, { children: /* @__PURE__ */ jsxs11(Flex, {
|
|
9310
|
+
/* @__PURE__ */ jsx19(AlertDialogRowStyled, { children: /* @__PURE__ */ jsxs11(Flex, { justify: "end", css: { width: "100%" }, children: [
|
|
9313
9311
|
completAlert.onAction && /* @__PURE__ */ jsx19(AlertDialog.Action, { children: /* @__PURE__ */ jsx19(
|
|
9314
9312
|
Button,
|
|
9315
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/Modal.tsx
CHANGED
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}
|