@react-email/button 0.0.15 → 0.0.16-canary.1

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 (5) hide show
  1. package/dist/index.d.mts +1 -1
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.js +72 -44
  4. package/dist/index.mjs +62 -44
  5. package/package.json +3 -3
package/dist/index.d.mts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
 
3
3
  type ButtonProps = React.ComponentPropsWithoutRef<"a">;
4
- declare const Button: React.FC<Readonly<ButtonProps>>;
4
+ declare const Button: React.ForwardRefExoticComponent<Readonly<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">> & React.RefAttributes<HTMLAnchorElement>>;
5
5
 
6
6
  export { Button, ButtonProps };
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
 
3
3
  type ButtonProps = React.ComponentPropsWithoutRef<"a">;
4
- declare const Button: React.FC<Readonly<ButtonProps>>;
4
+ declare const Button: React.ForwardRefExoticComponent<Readonly<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">> & React.RefAttributes<HTMLAnchorElement>>;
5
5
 
6
6
  export { Button, ButtonProps };
package/dist/index.js CHANGED
@@ -1,10 +1,12 @@
1
1
  "use strict";
2
+ var __create = Object.create;
2
3
  var __defProp = Object.defineProperty;
3
4
  var __defProps = Object.defineProperties;
4
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
6
  var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
6
7
  var __getOwnPropNames = Object.getOwnPropertyNames;
7
8
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
9
+ var __getProtoOf = Object.getPrototypeOf;
8
10
  var __hasOwnProp = Object.prototype.hasOwnProperty;
9
11
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
10
12
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -44,6 +46,14 @@ var __copyProps = (to, from, except, desc) => {
44
46
  }
45
47
  return to;
46
48
  };
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
+ ));
47
57
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
48
58
 
49
59
  // src/index.ts
@@ -53,6 +63,9 @@ __export(src_exports, {
53
63
  });
54
64
  module.exports = __toCommonJS(src_exports);
55
65
 
66
+ // src/button.tsx
67
+ var React = __toESM(require("react"));
68
+
56
69
  // src/utils/px-to-pt.ts
57
70
  var pxToPt = (px) => typeof px === "number" && !isNaN(Number(px)) ? px * 3 / 4 : null;
58
71
 
@@ -143,52 +156,67 @@ function parsePadding({
143
156
 
144
157
  // src/button.tsx
145
158
  var import_jsx_runtime = require("react/jsx-runtime");
146
- var Button = (_a) => {
147
- var _b = _a, {
148
- children,
149
- style,
150
- target = "_blank"
151
- } = _b, props = __objRest(_b, [
152
- "children",
153
- "style",
154
- "target"
155
- ]);
156
- const { pt, pr, pb, pl } = parsePadding({
157
- padding: style == null ? void 0 : style.padding,
158
- paddingLeft: style == null ? void 0 : style.paddingLeft,
159
- paddingRight: style == null ? void 0 : style.paddingRight,
160
- paddingTop: style == null ? void 0 : style.paddingTop,
161
- paddingBottom: style == null ? void 0 : style.paddingBottom
162
- });
163
- const y = pt + pb;
164
- const textRaise = pxToPt(y);
165
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
166
- "a",
167
- __spreadProps(__spreadValues({}, props), {
168
- style: buttonStyle(__spreadProps(__spreadValues({}, style), { pt, pr, pb, pl })),
169
- target,
170
- children: [
171
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
172
- "span",
173
- {
174
- dangerouslySetInnerHTML: {
175
- __html: `<!--[if mso]><i style="letter-spacing: ${pl}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`
159
+ function computeFontWidthAndSpaceCount(expectedWidth) {
160
+ let smallestSpaceCount = 0;
161
+ while (expectedWidth / smallestSpaceCount / 2 > 5) {
162
+ smallestSpaceCount++;
163
+ }
164
+ return [expectedWidth / smallestSpaceCount / 2, smallestSpaceCount];
165
+ }
166
+ var Button = React.forwardRef(
167
+ (_a, ref) => {
168
+ var _b = _a, { children, style, target = "_blank" } = _b, props = __objRest(_b, ["children", "style", "target"]);
169
+ var _a2, _b2, _c, _d;
170
+ const { pt, pr, pb, pl } = parsePadding({
171
+ padding: style == null ? void 0 : style.padding,
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
176
+ });
177
+ const y = pt + pb;
178
+ const textRaise = pxToPt(y);
179
+ const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(pl);
180
+ const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(pr);
181
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
182
+ "a",
183
+ __spreadProps(__spreadValues({}, props), {
184
+ ref,
185
+ style: buttonStyle(__spreadProps(__spreadValues({}, style), { pt, pr, pb, pl })),
186
+ target,
187
+ children: [
188
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
189
+ "span",
190
+ {
191
+ dangerouslySetInnerHTML: {
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]-->`
200
+ }
176
201
  }
177
- }
178
- ),
179
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: buttonTextStyle(pb), children }),
180
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
181
- "span",
182
- {
183
- dangerouslySetInnerHTML: {
184
- __html: `<!--[if mso]><i style="letter-spacing: ${pr}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`
202
+ ),
203
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: buttonTextStyle(pb), children }),
204
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
205
+ "span",
206
+ {
207
+ dangerouslySetInnerHTML: {
208
+ __html: `<!--[if mso]><i style="mso-font-width:${prFontWidth * 100}%" hidden>${"&#8202;".repeat(
209
+ prSpaceCount
210
+ )}&#8203;</i><![endif]-->`
211
+ }
185
212
  }
186
- }
187
- )
188
- ]
189
- })
190
- );
191
- };
213
+ )
214
+ ]
215
+ })
216
+ );
217
+ }
218
+ );
219
+ Button.displayName = "Button";
192
220
  var buttonStyle = (style) => {
193
221
  const _a = style || {}, { pt, pr, pb, pl } = _a, rest = __objRest(_a, ["pt", "pr", "pb", "pl"]);
194
222
  return __spreadProps(__spreadValues({
package/dist/index.mjs CHANGED
@@ -30,6 +30,9 @@ var __objRest = (source, exclude) => {
30
30
  return target;
31
31
  };
32
32
 
33
+ // src/button.tsx
34
+ import * as React from "react";
35
+
33
36
  // src/utils/px-to-pt.ts
34
37
  var pxToPt = (px) => typeof px === "number" && !isNaN(Number(px)) ? px * 3 / 4 : null;
35
38
 
@@ -120,52 +123,67 @@ function parsePadding({
120
123
 
121
124
  // src/button.tsx
122
125
  import { jsx, jsxs } from "react/jsx-runtime";
123
- var Button = (_a) => {
124
- var _b = _a, {
125
- children,
126
- style,
127
- target = "_blank"
128
- } = _b, props = __objRest(_b, [
129
- "children",
130
- "style",
131
- "target"
132
- ]);
133
- const { pt, pr, pb, pl } = parsePadding({
134
- padding: style == null ? void 0 : style.padding,
135
- paddingLeft: style == null ? void 0 : style.paddingLeft,
136
- paddingRight: style == null ? void 0 : style.paddingRight,
137
- paddingTop: style == null ? void 0 : style.paddingTop,
138
- paddingBottom: style == null ? void 0 : style.paddingBottom
139
- });
140
- const y = pt + pb;
141
- const textRaise = pxToPt(y);
142
- return /* @__PURE__ */ jsxs(
143
- "a",
144
- __spreadProps(__spreadValues({}, props), {
145
- style: buttonStyle(__spreadProps(__spreadValues({}, style), { pt, pr, pb, pl })),
146
- target,
147
- children: [
148
- /* @__PURE__ */ jsx(
149
- "span",
150
- {
151
- dangerouslySetInnerHTML: {
152
- __html: `<!--[if mso]><i style="letter-spacing: ${pl}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`
126
+ function computeFontWidthAndSpaceCount(expectedWidth) {
127
+ let smallestSpaceCount = 0;
128
+ while (expectedWidth / smallestSpaceCount / 2 > 5) {
129
+ smallestSpaceCount++;
130
+ }
131
+ return [expectedWidth / smallestSpaceCount / 2, smallestSpaceCount];
132
+ }
133
+ var Button = React.forwardRef(
134
+ (_a, ref) => {
135
+ var _b = _a, { children, style, target = "_blank" } = _b, props = __objRest(_b, ["children", "style", "target"]);
136
+ var _a2, _b2, _c, _d;
137
+ const { pt, pr, pb, pl } = parsePadding({
138
+ padding: style == null ? void 0 : style.padding,
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
143
+ });
144
+ const y = pt + pb;
145
+ const textRaise = pxToPt(y);
146
+ const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(pl);
147
+ const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(pr);
148
+ return /* @__PURE__ */ jsxs(
149
+ "a",
150
+ __spreadProps(__spreadValues({}, props), {
151
+ ref,
152
+ style: buttonStyle(__spreadProps(__spreadValues({}, style), { pt, pr, pb, pl })),
153
+ target,
154
+ children: [
155
+ /* @__PURE__ */ jsx(
156
+ "span",
157
+ {
158
+ dangerouslySetInnerHTML: {
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]-->`
167
+ }
153
168
  }
154
- }
155
- ),
156
- /* @__PURE__ */ jsx("span", { style: buttonTextStyle(pb), children }),
157
- /* @__PURE__ */ jsx(
158
- "span",
159
- {
160
- dangerouslySetInnerHTML: {
161
- __html: `<!--[if mso]><i style="letter-spacing: ${pr}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`
169
+ ),
170
+ /* @__PURE__ */ jsx("span", { style: buttonTextStyle(pb), children }),
171
+ /* @__PURE__ */ jsx(
172
+ "span",
173
+ {
174
+ dangerouslySetInnerHTML: {
175
+ __html: `<!--[if mso]><i style="mso-font-width:${prFontWidth * 100}%" hidden>${"&#8202;".repeat(
176
+ prSpaceCount
177
+ )}&#8203;</i><![endif]-->`
178
+ }
162
179
  }
163
- }
164
- )
165
- ]
166
- })
167
- );
168
- };
180
+ )
181
+ ]
182
+ })
183
+ );
184
+ }
185
+ );
186
+ Button.displayName = "Button";
169
187
  var buttonStyle = (style) => {
170
188
  const _a = style || {}, { pt, pr, pb, pl } = _a, rest = __objRest(_a, ["pt", "pr", "pb", "pl"]);
171
189
  return __spreadProps(__spreadValues({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-email/button",
3
- "version": "0.0.15",
3
+ "version": "0.0.16-canary.1",
4
4
  "description": "A link that is styled to look like a button",
5
5
  "sideEffects": false,
6
6
  "main": "./dist/index.js",
@@ -40,9 +40,9 @@
40
40
  "devDependencies": {
41
41
  "@babel/preset-react": "7.23.3",
42
42
  "typescript": "5.1.6",
43
- "@react-email/render": "0.0.13",
44
43
  "eslint-config-custom": "0.0.0",
45
- "tsconfig": "0.0.0"
44
+ "tsconfig": "0.0.0",
45
+ "@react-email/render": "0.0.17-canary.1"
46
46
  },
47
47
  "publishConfig": {
48
48
  "access": "public"