@react-email/button 0.1.0 → 0.2.1-tailwindv4.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 (9) hide show
  1. package/dist/index.d.mts +9 -7
  2. package/dist/index.d.mts.map +1 -0
  3. package/dist/index.d.ts +9 -7
  4. package/dist/index.d.ts.map +1 -0
  5. package/dist/index.js +160 -250
  6. package/dist/index.mjs +144 -224
  7. package/dist/index.mjs.map +1 -0
  8. package/package.json +6 -6
  9. package/readme.md +3 -4
package/dist/index.d.mts CHANGED
@@ -1,12 +1,14 @@
1
- import * as React from 'react';
1
+ import * as React from "react";
2
2
 
3
+ //#region src/button.d.ts
3
4
  type ButtonProps = Readonly<React.ComponentPropsWithoutRef<'a'>>;
4
5
  declare module 'react' {
5
- interface CSSProperties {
6
- msoPaddingAlt?: string | number | undefined;
7
- msoTextRaise?: string | number | undefined;
8
- }
6
+ interface CSSProperties {
7
+ msoPaddingAlt?: string | number | undefined;
8
+ msoTextRaise?: string | number | undefined;
9
+ }
9
10
  }
10
11
  declare const Button: React.ForwardRefExoticComponent<Readonly<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">> & React.RefAttributes<HTMLAnchorElement>>;
11
-
12
- export { Button, type ButtonProps };
12
+ //#endregion
13
+ export { Button, ButtonProps };
14
+ //# sourceMappingURL=index.d.mts.map
package/dist/index.d.mts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.mts","names":[],"sources":["../src/button.tsx"],"sourcesContent":[],"mappings":";;;KAIY,WAAA,GAAc,SAAS,KAAA,CAAM;;EAA7B,UAAA,aAAW,CAAA;IAAA,aAAA,CAAA,EAAA,MAAA,GAAA,MAAA,GAAA,SAAA;IAAY,YAAM,CAAA,EAAA,MAAA,GAAA,MAAA,GAAA,SAAA;;;AAA+B,cAmC3D,MAnC2D,EAmCrD,KAAA,CAAA,yBAnCqD,CAmCrD,QAnCqD,CAmCrD,IAnCqD,CAmCrD,KAAA,CAAA,iBAnCqD,CAmCrD,KAAA,CAAA,oBAnCqD,CAmCrD,iBAnCqD,CAAA,EAmCrD,iBAnCqD,CAAA,EAAA,KAAA,CAAA,CAAA,GAmCrD,KAAA,CAAA,aAnCqD,CAmCrD,iBAnCqD,CAAA,CAAA"}
package/dist/index.d.ts CHANGED
@@ -1,12 +1,14 @@
1
- import * as React from 'react';
1
+ import * as React from "react";
2
2
 
3
+ //#region src/button.d.ts
3
4
  type ButtonProps = Readonly<React.ComponentPropsWithoutRef<'a'>>;
4
5
  declare module 'react' {
5
- interface CSSProperties {
6
- msoPaddingAlt?: string | number | undefined;
7
- msoTextRaise?: string | number | undefined;
8
- }
6
+ interface CSSProperties {
7
+ msoPaddingAlt?: string | number | undefined;
8
+ msoTextRaise?: string | number | undefined;
9
+ }
9
10
  }
10
11
  declare const Button: React.ForwardRefExoticComponent<Readonly<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">> & React.RefAttributes<HTMLAnchorElement>>;
11
-
12
- export { Button, type ButtonProps };
12
+ //#endregion
13
+ export { Button, ButtonProps };
14
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","names":[],"sources":["../src/button.tsx"],"sourcesContent":[],"mappings":";;;KAIY,WAAA,GAAc,SAAS,KAAA,CAAM;;EAA7B,UAAA,aAAW,CAAA;IAAA,aAAA,CAAA,EAAA,MAAA,GAAA,MAAA,GAAA,SAAA;IAAY,YAAM,CAAA,EAAA,MAAA,GAAA,MAAA,GAAA,SAAA;;;AAA+B,cAmC3D,MAnC2D,EAmCrD,KAAA,CAAA,yBAnCqD,CAmCrD,QAnCqD,CAmCrD,IAnCqD,CAmCrD,KAAA,CAAA,iBAnCqD,CAmCrD,KAAA,CAAA,oBAnCqD,CAmCrD,iBAnCqD,CAAA,EAmCrD,iBAnCqD,CAAA,EAAA,KAAA,CAAA,CAAA,GAmCrD,KAAA,CAAA,aAnCqD,CAmCrD,iBAnCqD,CAAA,CAAA"}
package/dist/index.js CHANGED
@@ -1,271 +1,181 @@
1
- "use strict";
1
+ //#region rolldown:runtime
2
2
  var __create = Object.create;
3
3
  var __defProp = Object.defineProperty;
4
- var __defProps = Object.defineProperties;
5
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
7
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
8
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
9
6
  var __getProtoOf = Object.getPrototypeOf;
10
7
  var __hasOwnProp = Object.prototype.hasOwnProperty;
11
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
12
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
13
- var __spreadValues = (a, b) => {
14
- for (var prop in b || (b = {}))
15
- if (__hasOwnProp.call(b, prop))
16
- __defNormalProp(a, prop, b[prop]);
17
- if (__getOwnPropSymbols)
18
- for (var prop of __getOwnPropSymbols(b)) {
19
- if (__propIsEnum.call(b, prop))
20
- __defNormalProp(a, prop, b[prop]);
21
- }
22
- return a;
23
- };
24
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
25
- var __objRest = (source, exclude) => {
26
- var target = {};
27
- for (var prop in source)
28
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
29
- target[prop] = source[prop];
30
- if (source != null && __getOwnPropSymbols)
31
- for (var prop of __getOwnPropSymbols(source)) {
32
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
33
- target[prop] = source[prop];
34
- }
35
- return target;
36
- };
37
- var __export = (target, all) => {
38
- for (var name in all)
39
- __defProp(target, name, { get: all[name], enumerable: true });
40
- };
41
8
  var __copyProps = (to, from, except, desc) => {
42
- if (from && typeof from === "object" || typeof from === "function") {
43
- for (let key of __getOwnPropNames(from))
44
- if (!__hasOwnProp.call(to, key) && key !== except)
45
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
46
- }
47
- return to;
9
+ if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
10
+ key = keys[i];
11
+ if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
12
+ get: ((k) => from[k]).bind(null, key),
13
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
14
+ });
15
+ }
16
+ return to;
48
17
  };
49
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
50
- // If the importer is in node compatibility mode or this is not an ESM
51
- // file that has been converted to a CommonJS file using a Babel-
52
- // compatible transform (i.e. "__esModule" has not been set), then set
53
- // "default" to the CommonJS "module.exports" for node compatibility.
54
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
55
- mod
56
- ));
57
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
58
-
59
- // src/index.ts
60
- var index_exports = {};
61
- __export(index_exports, {
62
- Button: () => Button
63
- });
64
- module.exports = __toCommonJS(index_exports);
18
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
19
+ value: mod,
20
+ enumerable: true
21
+ }) : target, mod));
65
22
 
66
- // src/button.tsx
67
- var React = __toESM(require("react"));
23
+ //#endregion
24
+ let react = require("react");
25
+ react = __toESM(react);
26
+ let react_jsx_runtime = require("react/jsx-runtime");
27
+ react_jsx_runtime = __toESM(react_jsx_runtime);
68
28
 
69
- // src/utils/parse-padding.ts
29
+ //#region src/utils/parse-padding.ts
30
+ /**
31
+ * converts padding value to `px` equivalent.
32
+ * @example "1em" =\> 16
33
+ */
70
34
  function convertToPx(value) {
71
- let px = 0;
72
- if (!value) {
73
- return px;
74
- }
75
- if (typeof value === "number") {
76
- return value;
77
- }
78
- const matches = /^([\d.]+)(px|em|rem|%)$/.exec(value);
79
- if (matches && matches.length === 3) {
80
- const numValue = Number.parseFloat(matches[1]);
81
- const unit = matches[2];
82
- switch (unit) {
83
- case "px":
84
- return numValue;
85
- case "em":
86
- case "rem":
87
- px = numValue * 16;
88
- return px;
89
- case "%":
90
- px = numValue / 100 * 600;
91
- return px;
92
- default:
93
- return numValue;
94
- }
95
- }
96
- return 0;
35
+ let px = 0;
36
+ if (!value) return px;
37
+ if (typeof value === "number") return value;
38
+ const matches = /^([\d.]+)(px|em|rem|%)$/.exec(value);
39
+ if (matches && matches.length === 3) {
40
+ const numValue = Number.parseFloat(matches[1]);
41
+ switch (matches[2]) {
42
+ case "px": return numValue;
43
+ case "em":
44
+ case "rem":
45
+ px = numValue * 16;
46
+ return px;
47
+ case "%":
48
+ px = numValue / 100 * 600;
49
+ return px;
50
+ default: return numValue;
51
+ }
52
+ }
53
+ return 0;
97
54
  }
98
55
  function parsePaddingValue(value) {
99
- if (typeof value === "number")
100
- return {
101
- paddingTop: value,
102
- paddingBottom: value,
103
- paddingLeft: value,
104
- paddingRight: value
105
- };
106
- if (typeof value === "string") {
107
- const values = value.toString().trim().split(/\s+/);
108
- if (values.length === 1) {
109
- return {
110
- paddingTop: values[0],
111
- paddingBottom: values[0],
112
- paddingLeft: values[0],
113
- paddingRight: values[0]
114
- };
115
- }
116
- if (values.length === 2) {
117
- return {
118
- paddingTop: values[0],
119
- paddingRight: values[1],
120
- paddingBottom: values[0],
121
- paddingLeft: values[1]
122
- };
123
- }
124
- if (values.length === 3) {
125
- return {
126
- paddingTop: values[0],
127
- paddingRight: values[1],
128
- paddingBottom: values[2],
129
- paddingLeft: values[1]
130
- };
131
- }
132
- if (values.length === 4) {
133
- return {
134
- paddingTop: values[0],
135
- paddingRight: values[1],
136
- paddingBottom: values[2],
137
- paddingLeft: values[3]
138
- };
139
- }
140
- }
141
- return {
142
- paddingTop: void 0,
143
- paddingBottom: void 0,
144
- paddingLeft: void 0,
145
- paddingRight: void 0
146
- };
56
+ if (typeof value === "number") return {
57
+ paddingTop: value,
58
+ paddingBottom: value,
59
+ paddingLeft: value,
60
+ paddingRight: value
61
+ };
62
+ if (typeof value === "string") {
63
+ const values = value.toString().trim().split(/\s+/);
64
+ if (values.length === 1) return {
65
+ paddingTop: values[0],
66
+ paddingBottom: values[0],
67
+ paddingLeft: values[0],
68
+ paddingRight: values[0]
69
+ };
70
+ if (values.length === 2) return {
71
+ paddingTop: values[0],
72
+ paddingRight: values[1],
73
+ paddingBottom: values[0],
74
+ paddingLeft: values[1]
75
+ };
76
+ if (values.length === 3) return {
77
+ paddingTop: values[0],
78
+ paddingRight: values[1],
79
+ paddingBottom: values[2],
80
+ paddingLeft: values[1]
81
+ };
82
+ if (values.length === 4) return {
83
+ paddingTop: values[0],
84
+ paddingRight: values[1],
85
+ paddingBottom: values[2],
86
+ paddingLeft: values[3]
87
+ };
88
+ }
89
+ return {
90
+ paddingTop: void 0,
91
+ paddingBottom: void 0,
92
+ paddingLeft: void 0,
93
+ paddingRight: void 0
94
+ };
147
95
  }
96
+ /**
97
+ * Parses all the values out of a padding string to get the value for all padding props in `px`
98
+ * @example e.g. "10px" =\> pt: 10, pr: 10, pb: 10, pl: 10
99
+ */
148
100
  function parsePadding(properties) {
149
- let paddingTop;
150
- let paddingRight;
151
- let paddingBottom;
152
- let paddingLeft;
153
- for (const [key, value] of Object.entries(properties)) {
154
- if (key === "padding") {
155
- ({ paddingTop, paddingBottom, paddingLeft, paddingRight } = parsePaddingValue(value));
156
- } else if (key === "paddingTop") {
157
- paddingTop = value;
158
- } else if (key === "paddingRight") {
159
- paddingRight = value;
160
- } else if (key === "paddingBottom") {
161
- paddingBottom = value;
162
- } else if (key === "paddingLeft") {
163
- paddingLeft = value;
164
- }
165
- }
166
- return {
167
- paddingTop: paddingTop ? convertToPx(paddingTop) : void 0,
168
- paddingRight: paddingRight ? convertToPx(paddingRight) : void 0,
169
- paddingBottom: paddingBottom ? convertToPx(paddingBottom) : void 0,
170
- paddingLeft: paddingLeft ? convertToPx(paddingLeft) : void 0
171
- };
101
+ let paddingTop;
102
+ let paddingRight;
103
+ let paddingBottom;
104
+ let paddingLeft;
105
+ for (const [key, value] of Object.entries(properties)) if (key === "padding") ({paddingTop, paddingBottom, paddingLeft, paddingRight} = parsePaddingValue(value));
106
+ else if (key === "paddingTop") paddingTop = value;
107
+ else if (key === "paddingRight") paddingRight = value;
108
+ else if (key === "paddingBottom") paddingBottom = value;
109
+ else if (key === "paddingLeft") paddingLeft = value;
110
+ return {
111
+ paddingTop: paddingTop ? convertToPx(paddingTop) : void 0,
112
+ paddingRight: paddingRight ? convertToPx(paddingRight) : void 0,
113
+ paddingBottom: paddingBottom ? convertToPx(paddingBottom) : void 0,
114
+ paddingLeft: paddingLeft ? convertToPx(paddingLeft) : void 0
115
+ };
172
116
  }
173
117
 
174
- // src/utils/px-to-pt.ts
175
- var pxToPt = (px) => typeof px === "number" && !Number.isNaN(Number(px)) ? px * 3 / 4 : void 0;
118
+ //#endregion
119
+ //#region src/utils/px-to-pt.ts
120
+ const pxToPt = (px) => typeof px === "number" && !Number.isNaN(Number(px)) ? px * 3 / 4 : void 0;
176
121
 
177
- // src/button.tsx
178
- var import_jsx_runtime = require("react/jsx-runtime");
179
- var maxFontWidth = 5;
122
+ //#endregion
123
+ //#region src/button.tsx
124
+ const maxFontWidth = 5;
125
+ /**
126
+ * Computes a msoFontWidth \<= 5 and a count of space characters that,
127
+ * when applied, end up being as close to `expectedWidth` as possible.
128
+ */
180
129
  function computeFontWidthAndSpaceCount(expectedWidth) {
181
- if (expectedWidth === 0) return [0, 0];
182
- let smallestSpaceCount = 0;
183
- const computeRequiredFontWidth = () => {
184
- if (smallestSpaceCount > 0) {
185
- return expectedWidth / smallestSpaceCount / 2;
186
- }
187
- return Number.POSITIVE_INFINITY;
188
- };
189
- while (computeRequiredFontWidth() > maxFontWidth) {
190
- smallestSpaceCount++;
191
- }
192
- return [computeRequiredFontWidth(), smallestSpaceCount];
130
+ if (expectedWidth === 0) return [0, 0];
131
+ let smallestSpaceCount = 0;
132
+ const computeRequiredFontWidth = () => {
133
+ if (smallestSpaceCount > 0) return expectedWidth / smallestSpaceCount / 2;
134
+ return Number.POSITIVE_INFINITY;
135
+ };
136
+ while (computeRequiredFontWidth() > maxFontWidth) smallestSpaceCount++;
137
+ return [computeRequiredFontWidth(), smallestSpaceCount];
193
138
  }
194
- var Button = React.forwardRef(
195
- (_a, ref) => {
196
- var _b = _a, { children, style, target = "_blank" } = _b, props = __objRest(_b, ["children", "style", "target"]);
197
- const { paddingTop, paddingRight, paddingBottom, paddingLeft } = parsePadding(style != null ? style : {});
198
- const y = (paddingTop != null ? paddingTop : 0) + (paddingBottom != null ? paddingBottom : 0);
199
- const textRaise = pxToPt(y);
200
- const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(
201
- paddingLeft != null ? paddingLeft : 0
202
- );
203
- const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(
204
- paddingRight != null ? paddingRight : 0
205
- );
206
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
207
- "a",
208
- __spreadProps(__spreadValues({}, props), {
209
- ref,
210
- style: __spreadProps(__spreadValues({
211
- lineHeight: "100%",
212
- textDecoration: "none",
213
- display: "inline-block",
214
- maxWidth: "100%",
215
- msoPaddingAlt: "0px"
216
- }, style), {
217
- paddingTop,
218
- paddingRight,
219
- paddingBottom,
220
- paddingLeft
221
- }),
222
- target,
223
- children: [
224
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
225
- "span",
226
- {
227
- dangerouslySetInnerHTML: {
228
- // The `&#8202;` is as close to `1px` of an empty character as we can get, then, we use the `mso-font-width`
229
- // to scale it according to what padding the developer wants. `mso-font-width` also does not allow for percentages
230
- // >= 500% so we need to add extra spaces accordingly.
231
- //
232
- // See https://github.com/resend/react-email/issues/1512 for why we do not use letter-spacing instead.
233
- __html: `<!--[if mso]><i style="mso-font-width:${plFontWidth * 100}%;mso-text-raise:${textRaise}" hidden>${"&#8202;".repeat(
234
- plSpaceCount
235
- )}</i><![endif]-->`
236
- }
237
- }
238
- ),
239
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
240
- "span",
241
- {
242
- style: {
243
- maxWidth: "100%",
244
- display: "inline-block",
245
- lineHeight: "120%",
246
- msoPaddingAlt: "0px",
247
- msoTextRaise: pxToPt(paddingBottom)
248
- },
249
- children
250
- }
251
- ),
252
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
253
- "span",
254
- {
255
- dangerouslySetInnerHTML: {
256
- __html: `<!--[if mso]><i style="mso-font-width:${prFontWidth * 100}%" hidden>${"&#8202;".repeat(
257
- prSpaceCount
258
- )}&#8203;</i><![endif]-->`
259
- }
260
- }
261
- )
262
- ]
263
- })
264
- );
265
- }
266
- );
267
- Button.displayName = "Button";
268
- // Annotate the CommonJS export names for ESM import in node:
269
- 0 && (module.exports = {
270
- Button
139
+ const Button = react.forwardRef(({ children, style, target = "_blank",...props }, ref) => {
140
+ const { paddingTop, paddingRight, paddingBottom, paddingLeft } = parsePadding(style ?? {});
141
+ const y = (paddingTop ?? 0) + (paddingBottom ?? 0);
142
+ const textRaise = pxToPt(y);
143
+ const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(paddingLeft ?? 0);
144
+ const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(paddingRight ?? 0);
145
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
146
+ ...props,
147
+ ref,
148
+ style: {
149
+ lineHeight: "100%",
150
+ textDecoration: "none",
151
+ display: "inline-block",
152
+ maxWidth: "100%",
153
+ msoPaddingAlt: "0px",
154
+ ...style,
155
+ paddingTop,
156
+ paddingRight,
157
+ paddingBottom,
158
+ paddingLeft
159
+ },
160
+ target,
161
+ children: [
162
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: `<!--[if mso]><i style="mso-font-width:${plFontWidth * 100}%;mso-text-raise:${textRaise}" hidden>${"&#8202;".repeat(plSpaceCount)}</i><![endif]-->` } }),
163
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
164
+ style: {
165
+ maxWidth: "100%",
166
+ display: "inline-block",
167
+ lineHeight: "120%",
168
+ msoPaddingAlt: "0px",
169
+ msoTextRaise: pxToPt(paddingBottom)
170
+ },
171
+ children
172
+ }),
173
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: `<!--[if mso]><i style="mso-font-width:${prFontWidth * 100}%" hidden>${"&#8202;".repeat(prSpaceCount)}&#8203;</i><![endif]-->` } })
174
+ ]
175
+ });
271
176
  });
177
+ Button.displayName = "Button";
178
+ Button.tailwindTreatAsElement = true;
179
+
180
+ //#endregion
181
+ exports.Button = Button;
package/dist/index.mjs CHANGED
@@ -1,237 +1,157 @@
1
- var __defProp = Object.defineProperty;
2
- var __defProps = Object.defineProperties;
3
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
- var __spreadValues = (a, b) => {
9
- for (var prop in b || (b = {}))
10
- if (__hasOwnProp.call(b, prop))
11
- __defNormalProp(a, prop, b[prop]);
12
- if (__getOwnPropSymbols)
13
- for (var prop of __getOwnPropSymbols(b)) {
14
- if (__propIsEnum.call(b, prop))
15
- __defNormalProp(a, prop, b[prop]);
16
- }
17
- return a;
18
- };
19
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
- var __objRest = (source, exclude) => {
21
- var target = {};
22
- for (var prop in source)
23
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
- target[prop] = source[prop];
25
- if (source != null && __getOwnPropSymbols)
26
- for (var prop of __getOwnPropSymbols(source)) {
27
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
- target[prop] = source[prop];
29
- }
30
- return target;
31
- };
32
-
33
- // src/button.tsx
34
1
  import * as React from "react";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
35
3
 
36
- // src/utils/parse-padding.ts
4
+ //#region src/utils/parse-padding.ts
5
+ /**
6
+ * converts padding value to `px` equivalent.
7
+ * @example "1em" =\> 16
8
+ */
37
9
  function convertToPx(value) {
38
- let px = 0;
39
- if (!value) {
40
- return px;
41
- }
42
- if (typeof value === "number") {
43
- return value;
44
- }
45
- const matches = /^([\d.]+)(px|em|rem|%)$/.exec(value);
46
- if (matches && matches.length === 3) {
47
- const numValue = Number.parseFloat(matches[1]);
48
- const unit = matches[2];
49
- switch (unit) {
50
- case "px":
51
- return numValue;
52
- case "em":
53
- case "rem":
54
- px = numValue * 16;
55
- return px;
56
- case "%":
57
- px = numValue / 100 * 600;
58
- return px;
59
- default:
60
- return numValue;
61
- }
62
- }
63
- return 0;
10
+ let px = 0;
11
+ if (!value) return px;
12
+ if (typeof value === "number") return value;
13
+ const matches = /^([\d.]+)(px|em|rem|%)$/.exec(value);
14
+ if (matches && matches.length === 3) {
15
+ const numValue = Number.parseFloat(matches[1]);
16
+ switch (matches[2]) {
17
+ case "px": return numValue;
18
+ case "em":
19
+ case "rem":
20
+ px = numValue * 16;
21
+ return px;
22
+ case "%":
23
+ px = numValue / 100 * 600;
24
+ return px;
25
+ default: return numValue;
26
+ }
27
+ }
28
+ return 0;
64
29
  }
65
30
  function parsePaddingValue(value) {
66
- if (typeof value === "number")
67
- return {
68
- paddingTop: value,
69
- paddingBottom: value,
70
- paddingLeft: value,
71
- paddingRight: value
72
- };
73
- if (typeof value === "string") {
74
- const values = value.toString().trim().split(/\s+/);
75
- if (values.length === 1) {
76
- return {
77
- paddingTop: values[0],
78
- paddingBottom: values[0],
79
- paddingLeft: values[0],
80
- paddingRight: values[0]
81
- };
82
- }
83
- if (values.length === 2) {
84
- return {
85
- paddingTop: values[0],
86
- paddingRight: values[1],
87
- paddingBottom: values[0],
88
- paddingLeft: values[1]
89
- };
90
- }
91
- if (values.length === 3) {
92
- return {
93
- paddingTop: values[0],
94
- paddingRight: values[1],
95
- paddingBottom: values[2],
96
- paddingLeft: values[1]
97
- };
98
- }
99
- if (values.length === 4) {
100
- return {
101
- paddingTop: values[0],
102
- paddingRight: values[1],
103
- paddingBottom: values[2],
104
- paddingLeft: values[3]
105
- };
106
- }
107
- }
108
- return {
109
- paddingTop: void 0,
110
- paddingBottom: void 0,
111
- paddingLeft: void 0,
112
- paddingRight: void 0
113
- };
31
+ if (typeof value === "number") return {
32
+ paddingTop: value,
33
+ paddingBottom: value,
34
+ paddingLeft: value,
35
+ paddingRight: value
36
+ };
37
+ if (typeof value === "string") {
38
+ const values = value.toString().trim().split(/\s+/);
39
+ if (values.length === 1) return {
40
+ paddingTop: values[0],
41
+ paddingBottom: values[0],
42
+ paddingLeft: values[0],
43
+ paddingRight: values[0]
44
+ };
45
+ if (values.length === 2) return {
46
+ paddingTop: values[0],
47
+ paddingRight: values[1],
48
+ paddingBottom: values[0],
49
+ paddingLeft: values[1]
50
+ };
51
+ if (values.length === 3) return {
52
+ paddingTop: values[0],
53
+ paddingRight: values[1],
54
+ paddingBottom: values[2],
55
+ paddingLeft: values[1]
56
+ };
57
+ if (values.length === 4) return {
58
+ paddingTop: values[0],
59
+ paddingRight: values[1],
60
+ paddingBottom: values[2],
61
+ paddingLeft: values[3]
62
+ };
63
+ }
64
+ return {
65
+ paddingTop: void 0,
66
+ paddingBottom: void 0,
67
+ paddingLeft: void 0,
68
+ paddingRight: void 0
69
+ };
114
70
  }
71
+ /**
72
+ * Parses all the values out of a padding string to get the value for all padding props in `px`
73
+ * @example e.g. "10px" =\> pt: 10, pr: 10, pb: 10, pl: 10
74
+ */
115
75
  function parsePadding(properties) {
116
- let paddingTop;
117
- let paddingRight;
118
- let paddingBottom;
119
- let paddingLeft;
120
- for (const [key, value] of Object.entries(properties)) {
121
- if (key === "padding") {
122
- ({ paddingTop, paddingBottom, paddingLeft, paddingRight } = parsePaddingValue(value));
123
- } else if (key === "paddingTop") {
124
- paddingTop = value;
125
- } else if (key === "paddingRight") {
126
- paddingRight = value;
127
- } else if (key === "paddingBottom") {
128
- paddingBottom = value;
129
- } else if (key === "paddingLeft") {
130
- paddingLeft = value;
131
- }
132
- }
133
- return {
134
- paddingTop: paddingTop ? convertToPx(paddingTop) : void 0,
135
- paddingRight: paddingRight ? convertToPx(paddingRight) : void 0,
136
- paddingBottom: paddingBottom ? convertToPx(paddingBottom) : void 0,
137
- paddingLeft: paddingLeft ? convertToPx(paddingLeft) : void 0
138
- };
76
+ let paddingTop;
77
+ let paddingRight;
78
+ let paddingBottom;
79
+ let paddingLeft;
80
+ for (const [key, value] of Object.entries(properties)) if (key === "padding") ({paddingTop, paddingBottom, paddingLeft, paddingRight} = parsePaddingValue(value));
81
+ else if (key === "paddingTop") paddingTop = value;
82
+ else if (key === "paddingRight") paddingRight = value;
83
+ else if (key === "paddingBottom") paddingBottom = value;
84
+ else if (key === "paddingLeft") paddingLeft = value;
85
+ return {
86
+ paddingTop: paddingTop ? convertToPx(paddingTop) : void 0,
87
+ paddingRight: paddingRight ? convertToPx(paddingRight) : void 0,
88
+ paddingBottom: paddingBottom ? convertToPx(paddingBottom) : void 0,
89
+ paddingLeft: paddingLeft ? convertToPx(paddingLeft) : void 0
90
+ };
139
91
  }
140
92
 
141
- // src/utils/px-to-pt.ts
142
- var pxToPt = (px) => typeof px === "number" && !Number.isNaN(Number(px)) ? px * 3 / 4 : void 0;
93
+ //#endregion
94
+ //#region src/utils/px-to-pt.ts
95
+ const pxToPt = (px) => typeof px === "number" && !Number.isNaN(Number(px)) ? px * 3 / 4 : void 0;
143
96
 
144
- // src/button.tsx
145
- import { jsx, jsxs } from "react/jsx-runtime";
146
- var maxFontWidth = 5;
97
+ //#endregion
98
+ //#region src/button.tsx
99
+ const maxFontWidth = 5;
100
+ /**
101
+ * Computes a msoFontWidth \<= 5 and a count of space characters that,
102
+ * when applied, end up being as close to `expectedWidth` as possible.
103
+ */
147
104
  function computeFontWidthAndSpaceCount(expectedWidth) {
148
- if (expectedWidth === 0) return [0, 0];
149
- let smallestSpaceCount = 0;
150
- const computeRequiredFontWidth = () => {
151
- if (smallestSpaceCount > 0) {
152
- return expectedWidth / smallestSpaceCount / 2;
153
- }
154
- return Number.POSITIVE_INFINITY;
155
- };
156
- while (computeRequiredFontWidth() > maxFontWidth) {
157
- smallestSpaceCount++;
158
- }
159
- return [computeRequiredFontWidth(), smallestSpaceCount];
105
+ if (expectedWidth === 0) return [0, 0];
106
+ let smallestSpaceCount = 0;
107
+ const computeRequiredFontWidth = () => {
108
+ if (smallestSpaceCount > 0) return expectedWidth / smallestSpaceCount / 2;
109
+ return Number.POSITIVE_INFINITY;
110
+ };
111
+ while (computeRequiredFontWidth() > maxFontWidth) smallestSpaceCount++;
112
+ return [computeRequiredFontWidth(), smallestSpaceCount];
160
113
  }
161
- var Button = React.forwardRef(
162
- (_a, ref) => {
163
- var _b = _a, { children, style, target = "_blank" } = _b, props = __objRest(_b, ["children", "style", "target"]);
164
- const { paddingTop, paddingRight, paddingBottom, paddingLeft } = parsePadding(style != null ? style : {});
165
- const y = (paddingTop != null ? paddingTop : 0) + (paddingBottom != null ? paddingBottom : 0);
166
- const textRaise = pxToPt(y);
167
- const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(
168
- paddingLeft != null ? paddingLeft : 0
169
- );
170
- const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(
171
- paddingRight != null ? paddingRight : 0
172
- );
173
- return /* @__PURE__ */ jsxs(
174
- "a",
175
- __spreadProps(__spreadValues({}, props), {
176
- ref,
177
- style: __spreadProps(__spreadValues({
178
- lineHeight: "100%",
179
- textDecoration: "none",
180
- display: "inline-block",
181
- maxWidth: "100%",
182
- msoPaddingAlt: "0px"
183
- }, style), {
184
- paddingTop,
185
- paddingRight,
186
- paddingBottom,
187
- paddingLeft
188
- }),
189
- target,
190
- children: [
191
- /* @__PURE__ */ jsx(
192
- "span",
193
- {
194
- dangerouslySetInnerHTML: {
195
- // The `&#8202;` is as close to `1px` of an empty character as we can get, then, we use the `mso-font-width`
196
- // to scale it according to what padding the developer wants. `mso-font-width` also does not allow for percentages
197
- // >= 500% so we need to add extra spaces accordingly.
198
- //
199
- // See https://github.com/resend/react-email/issues/1512 for why we do not use letter-spacing instead.
200
- __html: `<!--[if mso]><i style="mso-font-width:${plFontWidth * 100}%;mso-text-raise:${textRaise}" hidden>${"&#8202;".repeat(
201
- plSpaceCount
202
- )}</i><![endif]-->`
203
- }
204
- }
205
- ),
206
- /* @__PURE__ */ jsx(
207
- "span",
208
- {
209
- style: {
210
- maxWidth: "100%",
211
- display: "inline-block",
212
- lineHeight: "120%",
213
- msoPaddingAlt: "0px",
214
- msoTextRaise: pxToPt(paddingBottom)
215
- },
216
- children
217
- }
218
- ),
219
- /* @__PURE__ */ jsx(
220
- "span",
221
- {
222
- dangerouslySetInnerHTML: {
223
- __html: `<!--[if mso]><i style="mso-font-width:${prFontWidth * 100}%" hidden>${"&#8202;".repeat(
224
- prSpaceCount
225
- )}&#8203;</i><![endif]-->`
226
- }
227
- }
228
- )
229
- ]
230
- })
231
- );
232
- }
233
- );
114
+ const Button = React.forwardRef(({ children, style, target = "_blank",...props }, ref) => {
115
+ const { paddingTop, paddingRight, paddingBottom, paddingLeft } = parsePadding(style ?? {});
116
+ const y = (paddingTop ?? 0) + (paddingBottom ?? 0);
117
+ const textRaise = pxToPt(y);
118
+ const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(paddingLeft ?? 0);
119
+ const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(paddingRight ?? 0);
120
+ return /* @__PURE__ */ jsxs("a", {
121
+ ...props,
122
+ ref,
123
+ style: {
124
+ lineHeight: "100%",
125
+ textDecoration: "none",
126
+ display: "inline-block",
127
+ maxWidth: "100%",
128
+ msoPaddingAlt: "0px",
129
+ ...style,
130
+ paddingTop,
131
+ paddingRight,
132
+ paddingBottom,
133
+ paddingLeft
134
+ },
135
+ target,
136
+ children: [
137
+ /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: `<!--[if mso]><i style="mso-font-width:${plFontWidth * 100}%;mso-text-raise:${textRaise}" hidden>${"&#8202;".repeat(plSpaceCount)}</i><![endif]-->` } }),
138
+ /* @__PURE__ */ jsx("span", {
139
+ style: {
140
+ maxWidth: "100%",
141
+ display: "inline-block",
142
+ lineHeight: "120%",
143
+ msoPaddingAlt: "0px",
144
+ msoTextRaise: pxToPt(paddingBottom)
145
+ },
146
+ children
147
+ }),
148
+ /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: `<!--[if mso]><i style="mso-font-width:${prFontWidth * 100}%" hidden>${"&#8202;".repeat(prSpaceCount)}&#8203;</i><![endif]-->` } })
149
+ ]
150
+ });
151
+ });
234
152
  Button.displayName = "Button";
235
- export {
236
- Button
237
- };
153
+ Button.tailwindTreatAsElement = true;
154
+
155
+ //#endregion
156
+ export { Button };
157
+ //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.mjs","names":["paddingTop: string | number | undefined","paddingRight: string | number | undefined","paddingBottom: string | number | undefined","paddingLeft: string | number | undefined"],"sources":["../src/utils/parse-padding.ts","../src/utils/px-to-pt.ts","../src/button.tsx"],"sourcesContent":["type PaddingType = string | number | undefined;\n\ninterface PaddingProperties {\n padding?: PaddingType;\n paddingTop?: PaddingType;\n paddingRight?: PaddingType;\n paddingBottom?: PaddingType;\n paddingLeft?: PaddingType;\n}\n\n/**\n * converts padding value to `px` equivalent.\n * @example \"1em\" =\\> 16\n */\nexport function convertToPx(value: PaddingType) {\n let px = 0;\n\n if (!value) {\n return px;\n }\n\n if (typeof value === 'number') {\n return value;\n }\n\n const matches = /^([\\d.]+)(px|em|rem|%)$/.exec(value);\n\n if (matches && matches.length === 3) {\n const numValue = Number.parseFloat(matches[1]);\n const unit = matches[2];\n\n switch (unit) {\n case 'px':\n return numValue;\n case 'em':\n case 'rem':\n px = numValue * 16;\n return px;\n case '%':\n px = (numValue / 100) * 600;\n return px;\n default:\n return numValue;\n }\n }\n return 0;\n}\n\nfunction parsePaddingValue(value: PaddingType) {\n if (typeof value === 'number')\n return {\n paddingTop: value,\n paddingBottom: value,\n paddingLeft: value,\n paddingRight: value,\n };\n\n if (typeof value === 'string') {\n const values = value.toString().trim().split(/\\s+/);\n\n if (values.length === 1) {\n return {\n paddingTop: values[0],\n paddingBottom: values[0],\n paddingLeft: values[0],\n paddingRight: values[0],\n };\n }\n\n if (values.length === 2) {\n return {\n paddingTop: values[0],\n paddingRight: values[1],\n paddingBottom: values[0],\n paddingLeft: values[1],\n };\n }\n\n if (values.length === 3) {\n return {\n paddingTop: values[0],\n paddingRight: values[1],\n paddingBottom: values[2],\n paddingLeft: values[1],\n };\n }\n\n if (values.length === 4) {\n return {\n paddingTop: values[0],\n paddingRight: values[1],\n paddingBottom: values[2],\n paddingLeft: values[3],\n };\n }\n }\n\n return {\n paddingTop: undefined,\n paddingBottom: undefined,\n paddingLeft: undefined,\n paddingRight: undefined,\n };\n}\n\n/**\n * Parses all the values out of a padding string to get the value for all padding props in `px`\n * @example e.g. \"10px\" =\\> pt: 10, pr: 10, pb: 10, pl: 10\n */\nexport function parsePadding(properties: PaddingProperties) {\n let paddingTop: string | number | undefined;\n let paddingRight: string | number | undefined;\n let paddingBottom: string | number | undefined;\n let paddingLeft: string | number | undefined;\n\n for (const [key, value] of Object.entries(properties)) {\n if (key === 'padding') {\n ({ paddingTop, paddingBottom, paddingLeft, paddingRight } =\n parsePaddingValue(value));\n } else if (key === 'paddingTop') {\n paddingTop = value;\n } else if (key === 'paddingRight') {\n paddingRight = value;\n } else if (key === 'paddingBottom') {\n paddingBottom = value;\n } else if (key === 'paddingLeft') {\n paddingLeft = value;\n }\n }\n\n return {\n paddingTop: paddingTop ? convertToPx(paddingTop) : undefined,\n paddingRight: paddingRight ? convertToPx(paddingRight) : undefined,\n paddingBottom: paddingBottom ? convertToPx(paddingBottom) : undefined,\n paddingLeft: paddingLeft ? convertToPx(paddingLeft) : undefined,\n };\n}\n","export const pxToPt = (px: number | undefined): number | undefined =>\n typeof px === 'number' && !Number.isNaN(Number(px))\n ? (px * 3) / 4\n : undefined;\n","import * as React from 'react';\nimport { parsePadding } from './utils/parse-padding';\nimport { pxToPt } from './utils/px-to-pt';\n\nexport type ButtonProps = Readonly<React.ComponentPropsWithoutRef<'a'>>;\n\nconst maxFontWidth = 5;\n\n/**\n * Computes a msoFontWidth \\<= 5 and a count of space characters that,\n * when applied, end up being as close to `expectedWidth` as possible.\n */\nfunction computeFontWidthAndSpaceCount(expectedWidth: number) {\n if (expectedWidth === 0) return [0, 0] as const;\n\n let smallestSpaceCount = 0;\n\n const computeRequiredFontWidth = () => {\n if (smallestSpaceCount > 0) {\n return expectedWidth / smallestSpaceCount / 2;\n }\n\n return Number.POSITIVE_INFINITY;\n };\n\n while (computeRequiredFontWidth() > maxFontWidth) {\n smallestSpaceCount++;\n }\n\n return [computeRequiredFontWidth(), smallestSpaceCount] as const;\n}\n\ndeclare module 'react' {\n interface CSSProperties {\n msoPaddingAlt?: string | number | undefined;\n msoTextRaise?: string | number | undefined;\n }\n}\n\nexport const Button = React.forwardRef<HTMLAnchorElement, ButtonProps>(\n ({ children, style, target = '_blank', ...props }, ref) => {\n const { paddingTop, paddingRight, paddingBottom, paddingLeft } =\n parsePadding(style ?? {});\n\n const y = (paddingTop ?? 0) + (paddingBottom ?? 0);\n const textRaise = pxToPt(y);\n\n const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(\n paddingLeft ?? 0,\n );\n const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(\n paddingRight ?? 0,\n );\n\n return (\n <a\n {...props}\n ref={ref}\n style={{\n lineHeight: '100%',\n textDecoration: 'none',\n display: 'inline-block',\n maxWidth: '100%',\n msoPaddingAlt: '0px',\n ...style,\n paddingTop,\n paddingRight,\n paddingBottom,\n paddingLeft,\n }}\n target={target}\n >\n <span\n dangerouslySetInnerHTML={{\n // The `&#8202;` is as close to `1px` of an empty character as we can get, then, we use the `mso-font-width`\n // to scale it according to what padding the developer wants. `mso-font-width` also does not allow for percentages\n // >= 500% so we need to add extra spaces accordingly.\n //\n // See https://github.com/resend/react-email/issues/1512 for why we do not use letter-spacing instead.\n __html: `<!--[if mso]><i style=\"mso-font-width:${\n plFontWidth * 100\n }%;mso-text-raise:${textRaise}\" hidden>${'&#8202;'.repeat(\n plSpaceCount,\n )}</i><![endif]-->`,\n }}\n />\n <span\n style={{\n maxWidth: '100%',\n display: 'inline-block',\n lineHeight: '120%',\n msoPaddingAlt: '0px',\n msoTextRaise: pxToPt(paddingBottom),\n }}\n >\n {children}\n </span>\n <span\n dangerouslySetInnerHTML={{\n __html: `<!--[if mso]><i style=\"mso-font-width:${\n prFontWidth * 100\n }%\" hidden>${'&#8202;'.repeat(\n prSpaceCount,\n )}&#8203;</i><![endif]-->`,\n }}\n />\n </a>\n );\n },\n);\n\nButton.displayName = 'Button';\n(Button as any).tailwindTreatAsElement = true;\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-email/button",
3
- "version": "0.1.0",
3
+ "version": "0.2.1-tailwindv4.0",
4
4
  "description": "A link that is styled to look like a button",
5
5
  "sideEffects": false,
6
6
  "main": "./dist/index.js",
@@ -39,17 +39,17 @@
39
39
  },
40
40
  "devDependencies": {
41
41
  "typescript": "5.8.3",
42
- "@react-email/render": "1.1.2",
42
+ "@react-email/render": "1.3.1",
43
43
  "tsconfig": "0.0.0"
44
44
  },
45
45
  "publishConfig": {
46
46
  "access": "public"
47
47
  },
48
48
  "scripts": {
49
- "build": "tsup src/index.ts --format esm,cjs --dts --external react",
49
+ "build": "tsdown src/index.ts --format esm,cjs --dts --external react",
50
+ "build:watch": "tsdown src/index.ts --format esm,cjs --dts --external react --watch",
50
51
  "clean": "rm -rf dist",
51
- "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
52
- "test:watch": "vitest",
53
- "test": "vitest run"
52
+ "test": "vitest run",
53
+ "test:watch": "vitest"
54
54
  }
55
55
  }
package/readme.md CHANGED
@@ -4,11 +4,10 @@
4
4
  <div align="center">A link that is styled to look like a button.</div>
5
5
  <br />
6
6
  <div align="center">
7
- <a href="https://react.email">Website</a>
7
+ <a href="https://react.email">Website</a>
8
8
  <span> · </span>
9
- <a href="https://github.com/resend/react-email">GitHub</a>
10
- <span> · </span>
11
- <a href="https://react.email/discord">Discord</a>
9
+ <a href="https://github.com/resend/react-email">GitHub</a>
10
+
12
11
  </div>
13
12
 
14
13
  ## Install