@react-email/button 0.0.3 → 0.0.4

package/dist/index.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 
 declare type RootProps = React.ComponentPropsWithoutRef<'a'>;
 interface ButtonProps extends RootProps {
+    pX?: number;
+    pY?: number;
 }
 declare const Button: React.ForwardRefExoticComponent<Readonly<ButtonProps> & React.RefAttributes<HTMLAnchorElement>>;
 

package/dist/index.js

@@ -5,6 +5,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -23,6 +26,224 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// ../utils/dist/as.js
+var require_as = __commonJS({
+  "../utils/dist/as.js"(exports) {
+    "use strict";
+    exports.__esModule = true;
+  }
+});
+
+// ../utils/dist/copy-text-to-clipboard.js
+var require_copy_text_to_clipboard = __commonJS({
+  "../utils/dist/copy-text-to-clipboard.js"(exports) {
+    "use strict";
+    var __awaiter = exports && exports.__awaiter || function(thisArg, _arguments, P, generator) {
+      function adopt(value) {
+        return value instanceof P ? value : new P(function(resolve) {
+          resolve(value);
+        });
+      }
+      return new (P || (P = Promise))(function(resolve, reject) {
+        function fulfilled(value) {
+          try {
+            step(generator.next(value));
+          } catch (e) {
+            reject(e);
+          }
+        }
+        function rejected(value) {
+          try {
+            step(generator["throw"](value));
+          } catch (e) {
+            reject(e);
+          }
+        }
+        function step(result) {
+          result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+        }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+      });
+    };
+    var __generator = exports && exports.__generator || function(thisArg, body) {
+      var _ = { label: 0, sent: function() {
+        if (t[0] & 1)
+          throw t[1];
+        return t[1];
+      }, trys: [], ops: [] }, f, y, t, g;
+      return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+      }), g;
+      function verb(n) {
+        return function(v) {
+          return step([n, v]);
+        };
+      }
+      function step(op) {
+        if (f)
+          throw new TypeError("Generator is already executing.");
+        while (_)
+          try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+              return t;
+            if (y = 0, t)
+              op = [op[0] & 2, t.value];
+            switch (op[0]) {
+              case 0:
+              case 1:
+                t = op;
+                break;
+              case 4:
+                _.label++;
+                return { value: op[1], done: false };
+              case 5:
+                _.label++;
+                y = op[1];
+                op = [0];
+                continue;
+              case 7:
+                op = _.ops.pop();
+                _.trys.pop();
+                continue;
+              default:
+                if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                  _ = 0;
+                  continue;
+                }
+                if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                  _.label = op[1];
+                  break;
+                }
+                if (op[0] === 6 && _.label < t[1]) {
+                  _.label = t[1];
+                  t = op;
+                  break;
+                }
+                if (t && _.label < t[2]) {
+                  _.label = t[2];
+                  _.ops.push(op);
+                  break;
+                }
+                if (t[2])
+                  _.ops.pop();
+                _.trys.pop();
+                continue;
+            }
+            op = body.call(thisArg, _);
+          } catch (e) {
+            op = [6, e];
+            y = 0;
+          } finally {
+            f = t = 0;
+          }
+        if (op[0] & 5)
+          throw op[1];
+        return { value: op[0] ? op[1] : void 0, done: true };
+      }
+    };
+    exports.__esModule = true;
+    exports.copyTextToClipboard = void 0;
+    var copyTextToClipboard = function(text) {
+      return __awaiter(void 0, void 0, void 0, function() {
+        var _a;
+        return __generator(this, function(_b) {
+          switch (_b.label) {
+            case 0:
+              _b.trys.push([0, 2, , 3]);
+              return [4, navigator.clipboard.writeText(text)];
+            case 1:
+              _b.sent();
+              return [3, 3];
+            case 2:
+              _a = _b.sent();
+              throw new Error("Not able to copy");
+            case 3:
+              return [2];
+          }
+        });
+      });
+    };
+    exports.copyTextToClipboard = copyTextToClipboard;
+  }
+});
+
+// ../utils/dist/px-to-pt.js
+var require_px_to_pt = __commonJS({
+  "../utils/dist/px-to-pt.js"(exports) {
+    "use strict";
+    exports.__esModule = true;
+    exports.pxToPt = void 0;
+    var pxToPt2 = function(px) {
+      return isNaN(Number(px)) ? null : parseInt(px, 10) * 3 / 4;
+    };
+    exports.pxToPt = pxToPt2;
+  }
+});
+
+// ../utils/dist/style-to-string.js
+var require_style_to_string = __commonJS({
+  "../utils/dist/style-to-string.js"(exports) {
+    "use strict";
+    exports.__esModule = true;
+    exports.styleToString = void 0;
+    var styleToString = function(style) {
+      return Object.keys(style).reduce(function(acc, key) {
+        return acc + key.split(/(?=[A-Z])/).join("-").toLowerCase() + ":" + style[key] + ";";
+      }, "");
+    };
+    exports.styleToString = styleToString;
+  }
+});
+
+// ../utils/dist/unreachable.js
+var require_unreachable = __commonJS({
+  "../utils/dist/unreachable.js"(exports) {
+    "use strict";
+    exports.__esModule = true;
+    exports.unreachable = void 0;
+    var unreachable = function(condition, message) {
+      if (message === void 0) {
+        message = "Entered unreachable code. Received '".concat(condition, "'.");
+      }
+      throw new TypeError(message);
+    };
+    exports.unreachable = unreachable;
+  }
+});
+
+// ../utils/dist/index.js
+var require_dist = __commonJS({
+  "../utils/dist/index.js"(exports) {
+    "use strict";
+    var __createBinding = exports && exports.__createBinding || (Object.create ? function(o, m, k, k2) {
+      if (k2 === void 0)
+        k2 = k;
+      var desc = Object.getOwnPropertyDescriptor(m, k);
+      if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+        desc = { enumerable: true, get: function() {
+          return m[k];
+        } };
+      }
+      Object.defineProperty(o, k2, desc);
+    } : function(o, m, k, k2) {
+      if (k2 === void 0)
+        k2 = k;
+      o[k2] = m[k];
+    });
+    var __exportStar = exports && exports.__exportStar || function(m, exports2) {
+      for (var p in m)
+        if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports2, p))
+          __createBinding(exports2, m, p);
+    };
+    exports.__esModule = true;
+    __exportStar(require_as(), exports);
+    __exportStar(require_copy_text_to_clipboard(), exports);
+    __exportStar(require_px_to_pt(), exports);
+    __exportStar(require_style_to_string(), exports);
+    __exportStar(require_unreachable(), exports);
+  }
+});
+
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
@@ -32,19 +253,62 @@ module.exports = __toCommonJS(src_exports);
 
 // src/button.tsx
 var React = __toESM(require("react"));
+var import_utils = __toESM(require_dist());
 var import_jsx_runtime = require("react/jsx-runtime");
 var Button = React.forwardRef(
-  ({ children, style, target = "_blank", ...props }, forwardedRef) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
-    ref: forwardedRef,
-    target,
-    dangerouslySetInnerHTML: {
-      __html: `<!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt" hidden>&nbsp;</i><![endif]--><span>${children}</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`
-    },
-    style,
-    ...props
-  })
+  ({ children, style, pX, pY, target = "_blank", ...props }, forwardedRef) => {
+    const y = (pY || 0) * 2;
+    const textRaise = (0, import_utils.pxToPt)(y.toString());
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", {
+      ...props,
+      ref: forwardedRef,
+      target,
+      style: buttonStyle({ ...style, pX, pY }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+          dangerouslySetInnerHTML: {
+            __html: `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`
+          }
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+          style: buttonTextStyle({ ...style, pX, pY }),
+          children
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+          dangerouslySetInnerHTML: {
+            __html: `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`
+          }
+        })
+      ]
+    });
+  }
 );
 Button.displayName = "Button";
+var buttonStyle = (style) => {
+  const paddingY = (style == null ? void 0 : style.pY) || 0;
+  const paddingX = (style == null ? void 0 : style.pX) || 0;
+  return {
+    ...style,
+    lineHeight: "100%",
+    textDecoration: "none",
+    display: "inline-block",
+    maxWidth: "100%",
+    padding: `${paddingY}px ${paddingX}px`
+  };
+};
+var buttonTextStyle = (style) => {
+  const paddingY = (style == null ? void 0 : style.pY) || 0;
+  return {
+    ...style,
+    maxWidth: "100%",
+    display: "inline-block",
+    lineHeight: "120%",
+    textDecoration: "none",
+    textTransform: "none",
+    msoPaddingAlt: "0px",
+    msoTextRaise: (0, import_utils.pxToPt)(paddingY.toString())
+  };
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button

package/dist/index.mjs

@@ -1,18 +1,301 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// ../utils/dist/as.js
+var require_as = __commonJS({
+  "../utils/dist/as.js"(exports) {
+    "use strict";
+    exports.__esModule = true;
+  }
+});
+
+// ../utils/dist/copy-text-to-clipboard.js
+var require_copy_text_to_clipboard = __commonJS({
+  "../utils/dist/copy-text-to-clipboard.js"(exports) {
+    "use strict";
+    var __awaiter = exports && exports.__awaiter || function(thisArg, _arguments, P, generator) {
+      function adopt(value) {
+        return value instanceof P ? value : new P(function(resolve) {
+          resolve(value);
+        });
+      }
+      return new (P || (P = Promise))(function(resolve, reject) {
+        function fulfilled(value) {
+          try {
+            step(generator.next(value));
+          } catch (e) {
+            reject(e);
+          }
+        }
+        function rejected(value) {
+          try {
+            step(generator["throw"](value));
+          } catch (e) {
+            reject(e);
+          }
+        }
+        function step(result) {
+          result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+        }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+      });
+    };
+    var __generator = exports && exports.__generator || function(thisArg, body) {
+      var _ = { label: 0, sent: function() {
+        if (t[0] & 1)
+          throw t[1];
+        return t[1];
+      }, trys: [], ops: [] }, f, y, t, g;
+      return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+      }), g;
+      function verb(n) {
+        return function(v) {
+          return step([n, v]);
+        };
+      }
+      function step(op) {
+        if (f)
+          throw new TypeError("Generator is already executing.");
+        while (_)
+          try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+              return t;
+            if (y = 0, t)
+              op = [op[0] & 2, t.value];
+            switch (op[0]) {
+              case 0:
+              case 1:
+                t = op;
+                break;
+              case 4:
+                _.label++;
+                return { value: op[1], done: false };
+              case 5:
+                _.label++;
+                y = op[1];
+                op = [0];
+                continue;
+              case 7:
+                op = _.ops.pop();
+                _.trys.pop();
+                continue;
+              default:
+                if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                  _ = 0;
+                  continue;
+                }
+                if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                  _.label = op[1];
+                  break;
+                }
+                if (op[0] === 6 && _.label < t[1]) {
+                  _.label = t[1];
+                  t = op;
+                  break;
+                }
+                if (t && _.label < t[2]) {
+                  _.label = t[2];
+                  _.ops.push(op);
+                  break;
+                }
+                if (t[2])
+                  _.ops.pop();
+                _.trys.pop();
+                continue;
+            }
+            op = body.call(thisArg, _);
+          } catch (e) {
+            op = [6, e];
+            y = 0;
+          } finally {
+            f = t = 0;
+          }
+        if (op[0] & 5)
+          throw op[1];
+        return { value: op[0] ? op[1] : void 0, done: true };
+      }
+    };
+    exports.__esModule = true;
+    exports.copyTextToClipboard = void 0;
+    var copyTextToClipboard = function(text) {
+      return __awaiter(void 0, void 0, void 0, function() {
+        var _a;
+        return __generator(this, function(_b) {
+          switch (_b.label) {
+            case 0:
+              _b.trys.push([0, 2, , 3]);
+              return [4, navigator.clipboard.writeText(text)];
+            case 1:
+              _b.sent();
+              return [3, 3];
+            case 2:
+              _a = _b.sent();
+              throw new Error("Not able to copy");
+            case 3:
+              return [2];
+          }
+        });
+      });
+    };
+    exports.copyTextToClipboard = copyTextToClipboard;
+  }
+});
+
+// ../utils/dist/px-to-pt.js
+var require_px_to_pt = __commonJS({
+  "../utils/dist/px-to-pt.js"(exports) {
+    "use strict";
+    exports.__esModule = true;
+    exports.pxToPt = void 0;
+    var pxToPt2 = function(px) {
+      return isNaN(Number(px)) ? null : parseInt(px, 10) * 3 / 4;
+    };
+    exports.pxToPt = pxToPt2;
+  }
+});
+
+// ../utils/dist/style-to-string.js
+var require_style_to_string = __commonJS({
+  "../utils/dist/style-to-string.js"(exports) {
+    "use strict";
+    exports.__esModule = true;
+    exports.styleToString = void 0;
+    var styleToString = function(style) {
+      return Object.keys(style).reduce(function(acc, key) {
+        return acc + key.split(/(?=[A-Z])/).join("-").toLowerCase() + ":" + style[key] + ";";
+      }, "");
+    };
+    exports.styleToString = styleToString;
+  }
+});
+
+// ../utils/dist/unreachable.js
+var require_unreachable = __commonJS({
+  "../utils/dist/unreachable.js"(exports) {
+    "use strict";
+    exports.__esModule = true;
+    exports.unreachable = void 0;
+    var unreachable = function(condition, message) {
+      if (message === void 0) {
+        message = "Entered unreachable code. Received '".concat(condition, "'.");
+      }
+      throw new TypeError(message);
+    };
+    exports.unreachable = unreachable;
+  }
+});
+
+// ../utils/dist/index.js
+var require_dist = __commonJS({
+  "../utils/dist/index.js"(exports) {
+    "use strict";
+    var __createBinding = exports && exports.__createBinding || (Object.create ? function(o, m, k, k2) {
+      if (k2 === void 0)
+        k2 = k;
+      var desc = Object.getOwnPropertyDescriptor(m, k);
+      if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+        desc = { enumerable: true, get: function() {
+          return m[k];
+        } };
+      }
+      Object.defineProperty(o, k2, desc);
+    } : function(o, m, k, k2) {
+      if (k2 === void 0)
+        k2 = k;
+      o[k2] = m[k];
+    });
+    var __exportStar = exports && exports.__exportStar || function(m, exports2) {
+      for (var p in m)
+        if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports2, p))
+          __createBinding(exports2, m, p);
+    };
+    exports.__esModule = true;
+    __exportStar(require_as(), exports);
+    __exportStar(require_copy_text_to_clipboard(), exports);
+    __exportStar(require_px_to_pt(), exports);
+    __exportStar(require_style_to_string(), exports);
+    __exportStar(require_unreachable(), exports);
+  }
+});
+
 // src/button.tsx
+var import_utils = __toESM(require_dist());
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var Button = React.forwardRef(
-  ({ children, style, target = "_blank", ...props }, forwardedRef) => /* @__PURE__ */ jsx("a", {
-    ref: forwardedRef,
-    target,
-    dangerouslySetInnerHTML: {
-      __html: `<!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt" hidden>&nbsp;</i><![endif]--><span>${children}</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`
-    },
-    style,
-    ...props
-  })
+  ({ children, style, pX, pY, target = "_blank", ...props }, forwardedRef) => {
+    const y = (pY || 0) * 2;
+    const textRaise = (0, import_utils.pxToPt)(y.toString());
+    return /* @__PURE__ */ jsxs("a", {
+      ...props,
+      ref: forwardedRef,
+      target,
+      style: buttonStyle({ ...style, pX, pY }),
+      children: [
+        /* @__PURE__ */ jsx("span", {
+          dangerouslySetInnerHTML: {
+            __html: `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`
+          }
+        }),
+        /* @__PURE__ */ jsx("span", {
+          style: buttonTextStyle({ ...style, pX, pY }),
+          children
+        }),
+        /* @__PURE__ */ jsx("span", {
+          dangerouslySetInnerHTML: {
+            __html: `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`
+          }
+        })
+      ]
+    });
+  }
 );
 Button.displayName = "Button";
+var buttonStyle = (style) => {
+  const paddingY = (style == null ? void 0 : style.pY) || 0;
+  const paddingX = (style == null ? void 0 : style.pX) || 0;
+  return {
+    ...style,
+    lineHeight: "100%",
+    textDecoration: "none",
+    display: "inline-block",
+    maxWidth: "100%",
+    padding: `${paddingY}px ${paddingX}px`
+  };
+};
+var buttonTextStyle = (style) => {
+  const paddingY = (style == null ? void 0 : style.pY) || 0;
+  return {
+    ...style,
+    maxWidth: "100%",
+    display: "inline-block",
+    lineHeight: "120%",
+    textDecoration: "none",
+    textTransform: "none",
+    msoPaddingAlt: "0px",
+    msoTextRaise: (0, import_utils.pxToPt)(paddingY.toString())
+  };
+};
 export {
   Button
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/button",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A React button component to help build emails",
   "sideEffects": false,
   "main": "./dist/index.js",

package/readme.md

@@ -55,8 +55,8 @@ const Email = () => {
 This component was tested using the most popular email clients.
 
 | <img src="https://react.email/static/images/readme/icons/gmail.svg" width="48px" height="48px" alt="Gmail logo"> | <img src="https://react.email/static/images/readme/icons/apple-mail.svg" width="48px" height="48px" alt="Apple Mail"> | <img src="https://react.email/static/images/readme/icons/outlook.svg" width="48px" height="48px" alt="Outlook logo"> | <img src="https://react.email/static/images/readme/icons/yahoo-mail.svg" width="48px" height="48px" alt="Yahoo! Mail logo"> | <img src="https://react.email/static/images/readme/icons/hey.svg" width="48px" height="48px" alt="HEY logo"> | <img src="https://react.email/static/images/readme/icons/superhuman.svg" width="48px" height="48px" alt="Superhuman logo"> |
-| --------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| Gmail ✔                                                                                             | Apple Mail ✔                                                                                             | Outlook ✔                                                                                               | Yahoo! Mail ✔                                                                                                  | HEY ✔                                                                                           | Superhuman ✔                                                                                                  |
+| ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
+| Gmail ✔                                                                                                          | Apple Mail ✔                                                                                                          | Outlook ✔                                                                                                            | Yahoo! Mail ✔                                                                                                               | HEY ✔                                                                                                        | Superhuman ✔                                                                                                               |
 
 ## License