@react-email/button 0.0.16-canary.0 → 0.0.16

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 (3) hide show
  1. package/dist/index.js +25 -6
  2. package/dist/index.mjs +25 -6
  3. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -156,18 +156,28 @@ function parsePadding({
156
156
 
157
157
  // src/button.tsx
158
158
  var import_jsx_runtime = require("react/jsx-runtime");
159
+ function computeFontWidthAndSpaceCount(expectedWidth) {
160
+ let smallestSpaceCount = 0;
161
+ while (expectedWidth / smallestSpaceCount / 2 > 5) {
162
+ smallestSpaceCount++;
163
+ }
164
+ return [expectedWidth / smallestSpaceCount / 2, smallestSpaceCount];
165
+ }
159
166
  var Button = React.forwardRef(
160
167
  (_a, ref) => {
161
168
  var _b = _a, { children, style, target = "_blank" } = _b, props = __objRest(_b, ["children", "style", "target"]);
169
+ var _a2, _b2, _c, _d;
162
170
  const { pt, pr, pb, pl } = parsePadding({
163
171
  padding: style == null ? void 0 : style.padding,
164
- paddingLeft: style == null ? void 0 : style.paddingLeft,
165
- paddingRight: style == null ? void 0 : style.paddingRight,
166
- paddingTop: style == null ? void 0 : style.paddingTop,
167
- paddingBottom: style == null ? void 0 : style.paddingBottom
172
+ paddingLeft: (_a2 = style == null ? void 0 : style.paddingLeft) != null ? _a2 : style == null ? void 0 : style.paddingInline,
173
+ paddingRight: (_b2 = style == null ? void 0 : style.paddingRight) != null ? _b2 : style == null ? void 0 : style.paddingInline,
174
+ paddingTop: (_c = style == null ? void 0 : style.paddingTop) != null ? _c : style == null ? void 0 : style.paddingBlock,
175
+ paddingBottom: (_d = style == null ? void 0 : style.paddingBottom) != null ? _d : style == null ? void 0 : style.paddingBlock
168
176
  });
169
177
  const y = pt + pb;
170
178
  const textRaise = pxToPt(y);
179
+ const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(pl);
180
+ const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(pr);
171
181
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
172
182
  "a",
173
183
  __spreadProps(__spreadValues({}, props), {
@@ -179,7 +189,14 @@ var Button = React.forwardRef(
179
189
  "span",
180
190
  {
181
191
  dangerouslySetInnerHTML: {
182
- __html: `<!--[if mso]><i style="letter-spacing: ${pl}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`
192
+ // The `&#8202;` is as close to `1px` of an empty character as we can get, then, we use the `mso-font-width`
193
+ // to scale it according to what padding the developer wants. `mso-font-width` also does not allow for percentages
194
+ // >= 500% so we need to add extra spaces accordingly.
195
+ //
196
+ // See https://github.com/resend/react-email/issues/1512 for why we do not use letter-spacing instead.
197
+ __html: `<!--[if mso]><i style="mso-font-width:${plFontWidth * 100}%;mso-text-raise:${textRaise}" hidden>${"&#8202;".repeat(
198
+ plSpaceCount
199
+ )}</i><![endif]-->`
183
200
  }
184
201
  }
185
202
  ),
@@ -188,7 +205,9 @@ var Button = React.forwardRef(
188
205
  "span",
189
206
  {
190
207
  dangerouslySetInnerHTML: {
191
- __html: `<!--[if mso]><i style="letter-spacing: ${pr}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`
208
+ __html: `<!--[if mso]><i style="mso-font-width:${prFontWidth * 100}%" hidden>${"&#8202;".repeat(
209
+ prSpaceCount
210
+ )}&#8203;</i><![endif]-->`
192
211
  }
193
212
  }
194
213
  )
package/dist/index.mjs CHANGED
@@ -123,18 +123,28 @@ function parsePadding({
123
123
 
124
124
  // src/button.tsx
125
125
  import { jsx, jsxs } from "react/jsx-runtime";
126
+ function computeFontWidthAndSpaceCount(expectedWidth) {
127
+ let smallestSpaceCount = 0;
128
+ while (expectedWidth / smallestSpaceCount / 2 > 5) {
129
+ smallestSpaceCount++;
130
+ }
131
+ return [expectedWidth / smallestSpaceCount / 2, smallestSpaceCount];
132
+ }
126
133
  var Button = React.forwardRef(
127
134
  (_a, ref) => {
128
135
  var _b = _a, { children, style, target = "_blank" } = _b, props = __objRest(_b, ["children", "style", "target"]);
136
+ var _a2, _b2, _c, _d;
129
137
  const { pt, pr, pb, pl } = parsePadding({
130
138
  padding: style == null ? void 0 : style.padding,
131
- paddingLeft: style == null ? void 0 : style.paddingLeft,
132
- paddingRight: style == null ? void 0 : style.paddingRight,
133
- paddingTop: style == null ? void 0 : style.paddingTop,
134
- paddingBottom: style == null ? void 0 : style.paddingBottom
139
+ paddingLeft: (_a2 = style == null ? void 0 : style.paddingLeft) != null ? _a2 : style == null ? void 0 : style.paddingInline,
140
+ paddingRight: (_b2 = style == null ? void 0 : style.paddingRight) != null ? _b2 : style == null ? void 0 : style.paddingInline,
141
+ paddingTop: (_c = style == null ? void 0 : style.paddingTop) != null ? _c : style == null ? void 0 : style.paddingBlock,
142
+ paddingBottom: (_d = style == null ? void 0 : style.paddingBottom) != null ? _d : style == null ? void 0 : style.paddingBlock
135
143
  });
136
144
  const y = pt + pb;
137
145
  const textRaise = pxToPt(y);
146
+ const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(pl);
147
+ const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(pr);
138
148
  return /* @__PURE__ */ jsxs(
139
149
  "a",
140
150
  __spreadProps(__spreadValues({}, props), {
@@ -146,7 +156,14 @@ var Button = React.forwardRef(
146
156
  "span",
147
157
  {
148
158
  dangerouslySetInnerHTML: {
149
- __html: `<!--[if mso]><i style="letter-spacing: ${pl}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`
159
+ // The `&#8202;` is as close to `1px` of an empty character as we can get, then, we use the `mso-font-width`
160
+ // to scale it according to what padding the developer wants. `mso-font-width` also does not allow for percentages
161
+ // >= 500% so we need to add extra spaces accordingly.
162
+ //
163
+ // See https://github.com/resend/react-email/issues/1512 for why we do not use letter-spacing instead.
164
+ __html: `<!--[if mso]><i style="mso-font-width:${plFontWidth * 100}%;mso-text-raise:${textRaise}" hidden>${"&#8202;".repeat(
165
+ plSpaceCount
166
+ )}</i><![endif]-->`
150
167
  }
151
168
  }
152
169
  ),
@@ -155,7 +172,9 @@ var Button = React.forwardRef(
155
172
  "span",
156
173
  {
157
174
  dangerouslySetInnerHTML: {
158
- __html: `<!--[if mso]><i style="letter-spacing: ${pr}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`
175
+ __html: `<!--[if mso]><i style="mso-font-width:${prFontWidth * 100}%" hidden>${"&#8202;".repeat(
176
+ prSpaceCount
177
+ )}&#8203;</i><![endif]-->`
159
178
  }
160
179
  }
161
180
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-email/button",
3
- "version": "0.0.16-canary.0",
3
+ "version": "0.0.16",
4
4
  "description": "A link that is styled to look like a button",
5
5
  "sideEffects": false,
6
6
  "main": "./dist/index.js",
@@ -35,13 +35,13 @@
35
35
  "node": ">=18.0.0"
36
36
  },
37
37
  "peerDependencies": {
38
- "react": "^18.0 || ^19.0 || ^19.0.0-rc"
38
+ "react": "^18.2.0"
39
39
  },
40
40
  "devDependencies": {
41
41
  "@babel/preset-react": "7.23.3",
42
42
  "typescript": "5.1.6",
43
- "@react-email/render": "0.0.17-canary.0",
44
43
  "eslint-config-custom": "0.0.0",
44
+ "@react-email/render": "0.0.17",
45
45
  "tsconfig": "0.0.0"
46
46
  },
47
47
  "publishConfig": {