@react-email/button 0.0.4 → 0.0.5
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/dist/index.js +73 -22
- package/dist/index.mjs +73 -22
- package/package.json +18 -6
- package/readme.md +5 -5
package/dist/index.js
CHANGED
|
@@ -180,6 +180,50 @@ var require_px_to_pt = __commonJS({
|
|
|
180
180
|
}
|
|
181
181
|
});
|
|
182
182
|
|
|
183
|
+
// ../utils/dist/spaces.js
|
|
184
|
+
var require_spaces = __commonJS({
|
|
185
|
+
"../utils/dist/spaces.js"(exports) {
|
|
186
|
+
"use strict";
|
|
187
|
+
var __assign = exports && exports.__assign || function() {
|
|
188
|
+
__assign = Object.assign || function(t) {
|
|
189
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
190
|
+
s = arguments[i];
|
|
191
|
+
for (var p in s)
|
|
192
|
+
if (Object.prototype.hasOwnProperty.call(s, p))
|
|
193
|
+
t[p] = s[p];
|
|
194
|
+
}
|
|
195
|
+
return t;
|
|
196
|
+
};
|
|
197
|
+
return __assign.apply(this, arguments);
|
|
198
|
+
};
|
|
199
|
+
exports.__esModule = true;
|
|
200
|
+
exports.withMargin = void 0;
|
|
201
|
+
var withMargin = function(props) {
|
|
202
|
+
return [
|
|
203
|
+
withSpace(props.m, ["margin"]),
|
|
204
|
+
withSpace(props.mx, ["marginLeft", "marginRight"]),
|
|
205
|
+
withSpace(props.my, ["marginTop", "marginBottom"]),
|
|
206
|
+
withSpace(props.mt, ["marginTop"]),
|
|
207
|
+
withSpace(props.mr, ["marginRight"]),
|
|
208
|
+
withSpace(props.mb, ["marginBottom"]),
|
|
209
|
+
withSpace(props.ml, ["marginLeft"])
|
|
210
|
+
].filter(function(s) {
|
|
211
|
+
return Object.keys(s).length;
|
|
212
|
+
})[0];
|
|
213
|
+
};
|
|
214
|
+
exports.withMargin = withMargin;
|
|
215
|
+
var withSpace = function(value, properties) {
|
|
216
|
+
return properties.reduce(function(styles, property) {
|
|
217
|
+
var _a;
|
|
218
|
+
if (value) {
|
|
219
|
+
return __assign(__assign({}, styles), (_a = {}, _a[property] = "".concat(value, "px"), _a));
|
|
220
|
+
}
|
|
221
|
+
return styles;
|
|
222
|
+
}, {});
|
|
223
|
+
};
|
|
224
|
+
}
|
|
225
|
+
});
|
|
226
|
+
|
|
183
227
|
// ../utils/dist/style-to-string.js
|
|
184
228
|
var require_style_to_string = __commonJS({
|
|
185
229
|
"../utils/dist/style-to-string.js"(exports) {
|
|
@@ -239,6 +283,7 @@ var require_dist = __commonJS({
|
|
|
239
283
|
__exportStar(require_as(), exports);
|
|
240
284
|
__exportStar(require_copy_text_to_clipboard(), exports);
|
|
241
285
|
__exportStar(require_px_to_pt(), exports);
|
|
286
|
+
__exportStar(require_spaces(), exports);
|
|
242
287
|
__exportStar(require_style_to_string(), exports);
|
|
243
288
|
__exportStar(require_unreachable(), exports);
|
|
244
289
|
}
|
|
@@ -259,28 +304,34 @@ var Button = React.forwardRef(
|
|
|
259
304
|
({ children, style, pX, pY, target = "_blank", ...props }, forwardedRef) => {
|
|
260
305
|
const y = (pY || 0) * 2;
|
|
261
306
|
const textRaise = (0, import_utils.pxToPt)(y.toString());
|
|
262
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
307
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
308
|
+
"a",
|
|
309
|
+
{
|
|
310
|
+
...props,
|
|
311
|
+
ref: forwardedRef,
|
|
312
|
+
target,
|
|
313
|
+
style: buttonStyle({ ...style, pX, pY }),
|
|
314
|
+
children: [
|
|
315
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
316
|
+
"span",
|
|
317
|
+
{
|
|
318
|
+
dangerouslySetInnerHTML: {
|
|
319
|
+
__html: `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden> </i><![endif]-->`
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
),
|
|
323
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: buttonTextStyle({ ...style, pX, pY }), children }),
|
|
324
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
325
|
+
"span",
|
|
326
|
+
{
|
|
327
|
+
dangerouslySetInnerHTML: {
|
|
328
|
+
__html: `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%" hidden> </i><![endif]-->`
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
)
|
|
332
|
+
]
|
|
333
|
+
}
|
|
334
|
+
);
|
|
284
335
|
}
|
|
285
336
|
);
|
|
286
337
|
Button.displayName = "Button";
|
package/dist/index.mjs
CHANGED
|
@@ -174,6 +174,50 @@ var require_px_to_pt = __commonJS({
|
|
|
174
174
|
}
|
|
175
175
|
});
|
|
176
176
|
|
|
177
|
+
// ../utils/dist/spaces.js
|
|
178
|
+
var require_spaces = __commonJS({
|
|
179
|
+
"../utils/dist/spaces.js"(exports) {
|
|
180
|
+
"use strict";
|
|
181
|
+
var __assign = exports && exports.__assign || function() {
|
|
182
|
+
__assign = Object.assign || function(t) {
|
|
183
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
184
|
+
s = arguments[i];
|
|
185
|
+
for (var p in s)
|
|
186
|
+
if (Object.prototype.hasOwnProperty.call(s, p))
|
|
187
|
+
t[p] = s[p];
|
|
188
|
+
}
|
|
189
|
+
return t;
|
|
190
|
+
};
|
|
191
|
+
return __assign.apply(this, arguments);
|
|
192
|
+
};
|
|
193
|
+
exports.__esModule = true;
|
|
194
|
+
exports.withMargin = void 0;
|
|
195
|
+
var withMargin = function(props) {
|
|
196
|
+
return [
|
|
197
|
+
withSpace(props.m, ["margin"]),
|
|
198
|
+
withSpace(props.mx, ["marginLeft", "marginRight"]),
|
|
199
|
+
withSpace(props.my, ["marginTop", "marginBottom"]),
|
|
200
|
+
withSpace(props.mt, ["marginTop"]),
|
|
201
|
+
withSpace(props.mr, ["marginRight"]),
|
|
202
|
+
withSpace(props.mb, ["marginBottom"]),
|
|
203
|
+
withSpace(props.ml, ["marginLeft"])
|
|
204
|
+
].filter(function(s) {
|
|
205
|
+
return Object.keys(s).length;
|
|
206
|
+
})[0];
|
|
207
|
+
};
|
|
208
|
+
exports.withMargin = withMargin;
|
|
209
|
+
var withSpace = function(value, properties) {
|
|
210
|
+
return properties.reduce(function(styles, property) {
|
|
211
|
+
var _a;
|
|
212
|
+
if (value) {
|
|
213
|
+
return __assign(__assign({}, styles), (_a = {}, _a[property] = "".concat(value, "px"), _a));
|
|
214
|
+
}
|
|
215
|
+
return styles;
|
|
216
|
+
}, {});
|
|
217
|
+
};
|
|
218
|
+
}
|
|
219
|
+
});
|
|
220
|
+
|
|
177
221
|
// ../utils/dist/style-to-string.js
|
|
178
222
|
var require_style_to_string = __commonJS({
|
|
179
223
|
"../utils/dist/style-to-string.js"(exports) {
|
|
@@ -233,6 +277,7 @@ var require_dist = __commonJS({
|
|
|
233
277
|
__exportStar(require_as(), exports);
|
|
234
278
|
__exportStar(require_copy_text_to_clipboard(), exports);
|
|
235
279
|
__exportStar(require_px_to_pt(), exports);
|
|
280
|
+
__exportStar(require_spaces(), exports);
|
|
236
281
|
__exportStar(require_style_to_string(), exports);
|
|
237
282
|
__exportStar(require_unreachable(), exports);
|
|
238
283
|
}
|
|
@@ -246,28 +291,34 @@ var Button = React.forwardRef(
|
|
|
246
291
|
({ children, style, pX, pY, target = "_blank", ...props }, forwardedRef) => {
|
|
247
292
|
const y = (pY || 0) * 2;
|
|
248
293
|
const textRaise = (0, import_utils.pxToPt)(y.toString());
|
|
249
|
-
return /* @__PURE__ */ jsxs(
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
294
|
+
return /* @__PURE__ */ jsxs(
|
|
295
|
+
"a",
|
|
296
|
+
{
|
|
297
|
+
...props,
|
|
298
|
+
ref: forwardedRef,
|
|
299
|
+
target,
|
|
300
|
+
style: buttonStyle({ ...style, pX, pY }),
|
|
301
|
+
children: [
|
|
302
|
+
/* @__PURE__ */ jsx(
|
|
303
|
+
"span",
|
|
304
|
+
{
|
|
305
|
+
dangerouslySetInnerHTML: {
|
|
306
|
+
__html: `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden> </i><![endif]-->`
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
),
|
|
310
|
+
/* @__PURE__ */ jsx("span", { style: buttonTextStyle({ ...style, pX, pY }), children }),
|
|
311
|
+
/* @__PURE__ */ jsx(
|
|
312
|
+
"span",
|
|
313
|
+
{
|
|
314
|
+
dangerouslySetInnerHTML: {
|
|
315
|
+
__html: `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%" hidden> </i><![endif]-->`
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
)
|
|
319
|
+
]
|
|
320
|
+
}
|
|
321
|
+
);
|
|
271
322
|
}
|
|
272
323
|
);
|
|
273
324
|
Button.displayName = "Button";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-email/button",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "A
|
|
3
|
+
"version": "0.0.5",
|
|
4
|
+
"description": "A link that is styled to look like a button",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"module": "./dist/index.mjs",
|
|
@@ -13,12 +13,24 @@
|
|
|
13
13
|
"scripts": {
|
|
14
14
|
"build": "tsup src/index.ts --format esm,cjs --dts --external react",
|
|
15
15
|
"dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
|
|
16
|
-
"lint": "
|
|
16
|
+
"lint": "eslint",
|
|
17
17
|
"clean": "rm -rf dist",
|
|
18
18
|
"test": "jest",
|
|
19
19
|
"test:watch": "jest --watch",
|
|
20
|
-
"format:check": "prettier --check \"**/*.{ts,tsx,md}\"",
|
|
21
|
-
"format": "prettier --write \"**/*.{ts,tsx,md}\""
|
|
20
|
+
"format:check": "prettier --ignore-path ./../../.prettierignore --check \"**/*.{ts,tsx,md}\"",
|
|
21
|
+
"format": "prettier --ignore-path ./../../.prettierignore --write \"**/*.{ts,tsx,md}\""
|
|
22
|
+
},
|
|
23
|
+
"repository": {
|
|
24
|
+
"type": "git",
|
|
25
|
+
"url": "https://github.com/zenorocha/react-email.git",
|
|
26
|
+
"directory": "packages/button"
|
|
27
|
+
},
|
|
28
|
+
"keywords": [
|
|
29
|
+
"react",
|
|
30
|
+
"email"
|
|
31
|
+
],
|
|
32
|
+
"engines": {
|
|
33
|
+
"node": ">=18.0.0"
|
|
22
34
|
},
|
|
23
35
|
"dependencies": {
|
|
24
36
|
"react": "18.2.0"
|
|
@@ -40,4 +52,4 @@
|
|
|
40
52
|
"publishConfig": {
|
|
41
53
|
"access": "public"
|
|
42
54
|
}
|
|
43
|
-
}
|
|
55
|
+
}
|
package/readme.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
2
2
|
|
|
3
3
|
<div align="center"><strong>@react-email/button</strong></div>
|
|
4
|
-
<div align="center">A
|
|
4
|
+
<div align="center">A link that is styled to look like a button.</div>
|
|
5
5
|
<br />
|
|
6
6
|
<div align="center">
|
|
7
7
|
<a href="https://react.email">Website</a>
|
|
@@ -54,9 +54,9 @@ const Email = () => {
|
|
|
54
54
|
|
|
55
55
|
This component was tested using the most popular email clients.
|
|
56
56
|
|
|
57
|
-
| <img src="https://react.email/static/
|
|
58
|
-
|
|
|
59
|
-
| Gmail ✔
|
|
57
|
+
| <img src="https://react.email/static/icons/gmail.svg" width="48px" height="48px" alt="Gmail logo"> | <img src="https://react.email/static/icons/apple-mail.svg" width="48px" height="48px" alt="Apple Mail"> | <img src="https://react.email/static/icons/outlook.svg" width="48px" height="48px" alt="Outlook logo"> | <img src="https://react.email/static/icons/yahoo-mail.svg" width="48px" height="48px" alt="Yahoo! Mail logo"> | <img src="https://react.email/static/icons/hey.svg" width="48px" height="48px" alt="HEY logo"> | <img src="https://react.email/static/icons/superhuman.svg" width="48px" height="48px" alt="Superhuman logo"> |
|
|
58
|
+
| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
|
|
59
|
+
| Gmail ✔ | Apple Mail ✔ | Outlook ✔ | Yahoo! Mail ✔ | HEY ✔ | Superhuman ✔ |
|
|
60
60
|
|
|
61
61
|
## License
|
|
62
62
|
|