@adidas/htmplar-core 0.0.0 → 2.0.0-alpha.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 (7) hide show
  1. package/dist/index.d.mts +295 -0
  2. package/dist/index.d.ts +295 -0
  3. package/dist/index.js +323 -0
  4. package/dist/index.js.map +1 -0
  5. package/dist/index.mjs +310 -0
  6. package/dist/index.mjs.map +1 -0
  7. package/package.json +50 -1
package/dist/index.d.mts ADDED
@@ -0,0 +1,295 @@
1
+ import * as React from 'react';
2
+ import React__default, { ReactNode, CSSProperties } from 'react';
3
+
4
+ interface BlockProps {
5
+ /**
6
+ * Content to display inside the block
7
+ */
8
+ children: React__default.ReactNode;
9
+ /**
10
+ * Background color
11
+ */
12
+ backgroundColor?: string;
13
+ /**
14
+ * Text color
15
+ */
16
+ color?: string;
17
+ /**
18
+ * Padding (in pixels)
19
+ */
20
+ padding?: number | string;
21
+ /**
22
+ * Maximum width (in pixels)
23
+ * @default 600
24
+ */
25
+ maxWidth?: number;
26
+ /**
27
+ * Horizontal alignment
28
+ * @default 'center'
29
+ */
30
+ align?: 'left' | 'center' | 'right';
31
+ /**
32
+ * Additional CSS class name
33
+ */
34
+ className?: string;
35
+ /**
36
+ * CSS ID
37
+ */
38
+ id?: string;
39
+ }
40
+ /**
41
+ * Block component - Main container for email content
42
+ * Uses table-based layout for email compatibility
43
+ */
44
+ declare function Block({ children, backgroundColor, color, padding, maxWidth, align, className, id, }: BlockProps): React__default.JSX.Element;
45
+
46
+ interface TextProps {
47
+ /**
48
+ * Text content
49
+ */
50
+ children: React__default.ReactNode;
51
+ /**
52
+ * Font size (in pixels)
53
+ * @default 16
54
+ */
55
+ fontSize?: number;
56
+ /**
57
+ * Font family
58
+ * @default 'Arial, sans-serif'
59
+ */
60
+ fontFamily?: string;
61
+ /**
62
+ * Text color
63
+ */
64
+ color?: string;
65
+ /**
66
+ * Line height
67
+ * @default 1.5
68
+ */
69
+ lineHeight?: number | string;
70
+ /**
71
+ * Text alignment
72
+ * @default 'left'
73
+ */
74
+ align?: 'left' | 'center' | 'right' | 'justify';
75
+ /**
76
+ * Font weight
77
+ */
78
+ fontWeight?: 'normal' | 'bold' | number;
79
+ /**
80
+ * Additional CSS class name
81
+ */
82
+ className?: string;
83
+ }
84
+ /**
85
+ * Text component - Email-safe text rendering
86
+ */
87
+ declare function Text({ children, fontSize, fontFamily, color, lineHeight, align, fontWeight, className, }: TextProps): React__default.JSX.Element;
88
+
89
+ interface ButtonProps {
90
+ /**
91
+ * Button text
92
+ */
93
+ children: React__default.ReactNode;
94
+ /**
95
+ * Link URL
96
+ */
97
+ href: string;
98
+ /**
99
+ * Background color
100
+ * @default '#0066cc'
101
+ */
102
+ backgroundColor?: string;
103
+ /**
104
+ * Text color
105
+ * @default '#ffffff'
106
+ */
107
+ color?: string;
108
+ /**
109
+ * Padding
110
+ * @default '12px 24px'
111
+ */
112
+ padding?: string;
113
+ /**
114
+ * Border radius
115
+ * @default '4px'
116
+ */
117
+ borderRadius?: string;
118
+ /**
119
+ * Font size
120
+ * @default 16
121
+ */
122
+ fontSize?: number;
123
+ /**
124
+ * Font family
125
+ * @default 'Arial, sans-serif'
126
+ */
127
+ fontFamily?: string;
128
+ /**
129
+ * Font weight
130
+ * @default 'bold'
131
+ */
132
+ fontWeight?: 'normal' | 'bold' | number;
133
+ /**
134
+ * Text alignment
135
+ * @default 'center'
136
+ */
137
+ align?: 'left' | 'center' | 'right';
138
+ /**
139
+ * Full width button
140
+ * @default false
141
+ */
142
+ fullWidth?: boolean;
143
+ /**
144
+ * Additional CSS class
145
+ */
146
+ className?: string;
147
+ }
148
+ /**
149
+ * Button component - Email-safe call-to-action button
150
+ * Uses bulletproof button technique with VML for Outlook
151
+ */
152
+ declare function Button({ children, href, backgroundColor, color, padding, borderRadius, fontSize, fontFamily, fontWeight, align, fullWidth, className, }: ButtonProps): React__default.JSX.Element;
153
+
154
+ interface ImageProps {
155
+ /**
156
+ * Image source URL
157
+ */
158
+ src: string;
159
+ /**
160
+ * Alt text for accessibility
161
+ */
162
+ alt: string;
163
+ /**
164
+ * Image width
165
+ */
166
+ width?: number | string;
167
+ /**
168
+ * Image height
169
+ */
170
+ height?: number | string;
171
+ /**
172
+ * Horizontal alignment
173
+ * @default 'center'
174
+ */
175
+ align?: 'left' | 'center' | 'right';
176
+ /**
177
+ * Additional CSS class
178
+ */
179
+ className?: string;
180
+ /**
181
+ * Title attribute
182
+ */
183
+ title?: string;
184
+ }
185
+ /**
186
+ * Image component - Email-safe responsive images
187
+ */
188
+ declare function Image({ src, alt, width, height, align, className, title }: ImageProps): React__default.JSX.Element;
189
+
190
+ interface LinkProps {
191
+ href: string;
192
+ children: ReactNode;
193
+ color?: string;
194
+ fontSize?: number;
195
+ fontWeight?: string | number;
196
+ textDecoration?: string;
197
+ target?: string;
198
+ rel?: string;
199
+ style?: CSSProperties;
200
+ }
201
+ /**
202
+ * Link component for email-safe hyperlinks
203
+ * Ensures proper styling and accessibility in all email clients
204
+ */
205
+ declare function Link({ href, children, color, fontSize, fontWeight, textDecoration, target, rel, style, }: LinkProps): React.JSX.Element;
206
+
207
+ interface HeadingProps {
208
+ level?: 1 | 2 | 3 | 4 | 5 | 6;
209
+ children: ReactNode;
210
+ color?: string;
211
+ fontSize?: number;
212
+ fontWeight?: string | number;
213
+ align?: 'left' | 'center' | 'right';
214
+ margin?: string | number;
215
+ lineHeight?: string | number;
216
+ style?: CSSProperties;
217
+ }
218
+ /**
219
+ * Heading component for semantic email headings
220
+ * Uses proper HTML heading tags (h1-h6) with email-safe styling
221
+ */
222
+ declare function Heading({ level, children, color, fontSize, fontWeight, align, margin, lineHeight, style, }: HeadingProps): React.JSX.Element;
223
+
224
+ interface SpacerProps {
225
+ height?: number;
226
+ width?: number;
227
+ }
228
+ /**
229
+ * Spacer component for adding vertical or horizontal space
230
+ * Uses table-based layout for consistent spacing across email clients
231
+ */
232
+ declare function Spacer({ height, width }: SpacerProps): React.JSX.Element;
233
+
234
+ interface DividerProps {
235
+ color?: string;
236
+ height?: number;
237
+ width?: string | number;
238
+ marginTop?: number;
239
+ marginBottom?: number;
240
+ }
241
+ /**
242
+ * Divider component for horizontal lines
243
+ * Uses border-top for reliable rendering across email clients
244
+ */
245
+ declare function Divider({ color, height, width, marginTop, marginBottom, }: DividerProps): React.JSX.Element;
246
+
247
+ interface RowProps {
248
+ children: ReactNode;
249
+ backgroundColor?: string;
250
+ padding?: number | string;
251
+ style?: CSSProperties;
252
+ }
253
+ /**
254
+ * Row component for horizontal layout containers
255
+ * Works with Column components to create responsive grid layouts
256
+ */
257
+ declare function Row({ children, backgroundColor, padding: _padding, style }: RowProps): React.JSX.Element;
258
+
259
+ interface ColumnProps {
260
+ children: ReactNode;
261
+ width?: number | string;
262
+ backgroundColor?: string;
263
+ padding?: number | string;
264
+ align?: 'left' | 'center' | 'right';
265
+ verticalAlign?: 'top' | 'middle' | 'bottom';
266
+ style?: CSSProperties;
267
+ }
268
+ /**
269
+ * Column component for grid layouts
270
+ * Must be used inside a Row component
271
+ * Responsive: stacks on mobile by default
272
+ */
273
+ declare function Column({ children, width, backgroundColor, padding, align, verticalAlign, style, }: ColumnProps): React.JSX.Element;
274
+
275
+ interface ContainerProps {
276
+ children: ReactNode;
277
+ maxWidth?: number;
278
+ backgroundColor?: string;
279
+ padding?: number | string;
280
+ align?: 'left' | 'center' | 'right';
281
+ style?: CSSProperties;
282
+ }
283
+ /**
284
+ * Container component - lightweight wrapper without MSO conditionals
285
+ * Use Block for full email-safe containers with Outlook support
286
+ */
287
+ declare function Container({ children, maxWidth, backgroundColor, padding, align, style, }: ContainerProps): React.JSX.Element;
288
+
289
+ /**
290
+ * @adidas/htmplar-core - React component library for email development
291
+ * @packageDocumentation
292
+ */
293
+ declare const version = "2.0.0-alpha.0";
294
+
295
+ export { Block, type BlockProps, Button, type ButtonProps, Column, type ColumnProps, Container, type ContainerProps, Divider, type DividerProps, Heading, type HeadingProps, Image, type ImageProps, Link, type LinkProps, Row, type RowProps, Spacer, type SpacerProps, Text, type TextProps, version };
package/dist/index.d.ts ADDED
@@ -0,0 +1,295 @@
1
+ import * as React from 'react';
2
+ import React__default, { ReactNode, CSSProperties } from 'react';
3
+
4
+ interface BlockProps {
5
+ /**
6
+ * Content to display inside the block
7
+ */
8
+ children: React__default.ReactNode;
9
+ /**
10
+ * Background color
11
+ */
12
+ backgroundColor?: string;
13
+ /**
14
+ * Text color
15
+ */
16
+ color?: string;
17
+ /**
18
+ * Padding (in pixels)
19
+ */
20
+ padding?: number | string;
21
+ /**
22
+ * Maximum width (in pixels)
23
+ * @default 600
24
+ */
25
+ maxWidth?: number;
26
+ /**
27
+ * Horizontal alignment
28
+ * @default 'center'
29
+ */
30
+ align?: 'left' | 'center' | 'right';
31
+ /**
32
+ * Additional CSS class name
33
+ */
34
+ className?: string;
35
+ /**
36
+ * CSS ID
37
+ */
38
+ id?: string;
39
+ }
40
+ /**
41
+ * Block component - Main container for email content
42
+ * Uses table-based layout for email compatibility
43
+ */
44
+ declare function Block({ children, backgroundColor, color, padding, maxWidth, align, className, id, }: BlockProps): React__default.JSX.Element;
45
+
46
+ interface TextProps {
47
+ /**
48
+ * Text content
49
+ */
50
+ children: React__default.ReactNode;
51
+ /**
52
+ * Font size (in pixels)
53
+ * @default 16
54
+ */
55
+ fontSize?: number;
56
+ /**
57
+ * Font family
58
+ * @default 'Arial, sans-serif'
59
+ */
60
+ fontFamily?: string;
61
+ /**
62
+ * Text color
63
+ */
64
+ color?: string;
65
+ /**
66
+ * Line height
67
+ * @default 1.5
68
+ */
69
+ lineHeight?: number | string;
70
+ /**
71
+ * Text alignment
72
+ * @default 'left'
73
+ */
74
+ align?: 'left' | 'center' | 'right' | 'justify';
75
+ /**
76
+ * Font weight
77
+ */
78
+ fontWeight?: 'normal' | 'bold' | number;
79
+ /**
80
+ * Additional CSS class name
81
+ */
82
+ className?: string;
83
+ }
84
+ /**
85
+ * Text component - Email-safe text rendering
86
+ */
87
+ declare function Text({ children, fontSize, fontFamily, color, lineHeight, align, fontWeight, className, }: TextProps): React__default.JSX.Element;
88
+
89
+ interface ButtonProps {
90
+ /**
91
+ * Button text
92
+ */
93
+ children: React__default.ReactNode;
94
+ /**
95
+ * Link URL
96
+ */
97
+ href: string;
98
+ /**
99
+ * Background color
100
+ * @default '#0066cc'
101
+ */
102
+ backgroundColor?: string;
103
+ /**
104
+ * Text color
105
+ * @default '#ffffff'
106
+ */
107
+ color?: string;
108
+ /**
109
+ * Padding
110
+ * @default '12px 24px'
111
+ */
112
+ padding?: string;
113
+ /**
114
+ * Border radius
115
+ * @default '4px'
116
+ */
117
+ borderRadius?: string;
118
+ /**
119
+ * Font size
120
+ * @default 16
121
+ */
122
+ fontSize?: number;
123
+ /**
124
+ * Font family
125
+ * @default 'Arial, sans-serif'
126
+ */
127
+ fontFamily?: string;
128
+ /**
129
+ * Font weight
130
+ * @default 'bold'
131
+ */
132
+ fontWeight?: 'normal' | 'bold' | number;
133
+ /**
134
+ * Text alignment
135
+ * @default 'center'
136
+ */
137
+ align?: 'left' | 'center' | 'right';
138
+ /**
139
+ * Full width button
140
+ * @default false
141
+ */
142
+ fullWidth?: boolean;
143
+ /**
144
+ * Additional CSS class
145
+ */
146
+ className?: string;
147
+ }
148
+ /**
149
+ * Button component - Email-safe call-to-action button
150
+ * Uses bulletproof button technique with VML for Outlook
151
+ */
152
+ declare function Button({ children, href, backgroundColor, color, padding, borderRadius, fontSize, fontFamily, fontWeight, align, fullWidth, className, }: ButtonProps): React__default.JSX.Element;
153
+
154
+ interface ImageProps {
155
+ /**
156
+ * Image source URL
157
+ */
158
+ src: string;
159
+ /**
160
+ * Alt text for accessibility
161
+ */
162
+ alt: string;
163
+ /**
164
+ * Image width
165
+ */
166
+ width?: number | string;
167
+ /**
168
+ * Image height
169
+ */
170
+ height?: number | string;
171
+ /**
172
+ * Horizontal alignment
173
+ * @default 'center'
174
+ */
175
+ align?: 'left' | 'center' | 'right';
176
+ /**
177
+ * Additional CSS class
178
+ */
179
+ className?: string;
180
+ /**
181
+ * Title attribute
182
+ */
183
+ title?: string;
184
+ }
185
+ /**
186
+ * Image component - Email-safe responsive images
187
+ */
188
+ declare function Image({ src, alt, width, height, align, className, title }: ImageProps): React__default.JSX.Element;
189
+
190
+ interface LinkProps {
191
+ href: string;
192
+ children: ReactNode;
193
+ color?: string;
194
+ fontSize?: number;
195
+ fontWeight?: string | number;
196
+ textDecoration?: string;
197
+ target?: string;
198
+ rel?: string;
199
+ style?: CSSProperties;
200
+ }
201
+ /**
202
+ * Link component for email-safe hyperlinks
203
+ * Ensures proper styling and accessibility in all email clients
204
+ */
205
+ declare function Link({ href, children, color, fontSize, fontWeight, textDecoration, target, rel, style, }: LinkProps): React.JSX.Element;
206
+
207
+ interface HeadingProps {
208
+ level?: 1 | 2 | 3 | 4 | 5 | 6;
209
+ children: ReactNode;
210
+ color?: string;
211
+ fontSize?: number;
212
+ fontWeight?: string | number;
213
+ align?: 'left' | 'center' | 'right';
214
+ margin?: string | number;
215
+ lineHeight?: string | number;
216
+ style?: CSSProperties;
217
+ }
218
+ /**
219
+ * Heading component for semantic email headings
220
+ * Uses proper HTML heading tags (h1-h6) with email-safe styling
221
+ */
222
+ declare function Heading({ level, children, color, fontSize, fontWeight, align, margin, lineHeight, style, }: HeadingProps): React.JSX.Element;
223
+
224
+ interface SpacerProps {
225
+ height?: number;
226
+ width?: number;
227
+ }
228
+ /**
229
+ * Spacer component for adding vertical or horizontal space
230
+ * Uses table-based layout for consistent spacing across email clients
231
+ */
232
+ declare function Spacer({ height, width }: SpacerProps): React.JSX.Element;
233
+
234
+ interface DividerProps {
235
+ color?: string;
236
+ height?: number;
237
+ width?: string | number;
238
+ marginTop?: number;
239
+ marginBottom?: number;
240
+ }
241
+ /**
242
+ * Divider component for horizontal lines
243
+ * Uses border-top for reliable rendering across email clients
244
+ */
245
+ declare function Divider({ color, height, width, marginTop, marginBottom, }: DividerProps): React.JSX.Element;
246
+
247
+ interface RowProps {
248
+ children: ReactNode;
249
+ backgroundColor?: string;
250
+ padding?: number | string;
251
+ style?: CSSProperties;
252
+ }
253
+ /**
254
+ * Row component for horizontal layout containers
255
+ * Works with Column components to create responsive grid layouts
256
+ */
257
+ declare function Row({ children, backgroundColor, padding: _padding, style }: RowProps): React.JSX.Element;
258
+
259
+ interface ColumnProps {
260
+ children: ReactNode;
261
+ width?: number | string;
262
+ backgroundColor?: string;
263
+ padding?: number | string;
264
+ align?: 'left' | 'center' | 'right';
265
+ verticalAlign?: 'top' | 'middle' | 'bottom';
266
+ style?: CSSProperties;
267
+ }
268
+ /**
269
+ * Column component for grid layouts
270
+ * Must be used inside a Row component
271
+ * Responsive: stacks on mobile by default
272
+ */
273
+ declare function Column({ children, width, backgroundColor, padding, align, verticalAlign, style, }: ColumnProps): React.JSX.Element;
274
+
275
+ interface ContainerProps {
276
+ children: ReactNode;
277
+ maxWidth?: number;
278
+ backgroundColor?: string;
279
+ padding?: number | string;
280
+ align?: 'left' | 'center' | 'right';
281
+ style?: CSSProperties;
282
+ }
283
+ /**
284
+ * Container component - lightweight wrapper without MSO conditionals
285
+ * Use Block for full email-safe containers with Outlook support
286
+ */
287
+ declare function Container({ children, maxWidth, backgroundColor, padding, align, style, }: ContainerProps): React.JSX.Element;
288
+
289
+ /**
290
+ * @adidas/htmplar-core - React component library for email development
291
+ * @packageDocumentation
292
+ */
293
+ declare const version = "2.0.0-alpha.0";
294
+
295
+ export { Block, type BlockProps, Button, type ButtonProps, Column, type ColumnProps, Container, type ContainerProps, Divider, type DividerProps, Heading, type HeadingProps, Image, type ImageProps, Link, type LinkProps, Row, type RowProps, Spacer, type SpacerProps, Text, type TextProps, version };