@react-email/button - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1-tailwindv4.0

dist/index.d.mts.map

+{"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"}

dist/index.d.ts.map

+{"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"}

dist/index.mjs.map

+{"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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"}

dist/index.d.mts

@@ -1,12 +0,14 @@
-import * as React from 'react';
+import * as React from "react";
 
+//#region src/button.d.ts
 type ButtonProps = Readonly<React.ComponentPropsWithoutRef<'a'>>;
 declare module 'react' {
-    interface CSSProperties {
-        msoPaddingAlt?: string | number | undefined;
-        msoTextRaise?: string | number | undefined;
-    }
+  interface CSSProperties {
+    msoPaddingAlt?: string | number | undefined;
+    msoTextRaise?: string | number | undefined;
+  }
 }
 declare const Button: React.ForwardRefExoticComponent<Readonly<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">> & React.RefAttributes<HTMLAnchorElement>>;
-
-export { Button, type ButtonProps };
+//#endregion
+export { Button, ButtonProps };
+//# sourceMappingURL=index.d.mts.map

dist/index.d.ts

@@ -1,12 +0,14 @@
-import * as React from 'react';
+import * as React from "react";
 
+//#region src/button.d.ts
 type ButtonProps = Readonly<React.ComponentPropsWithoutRef<'a'>>;
 declare module 'react' {
-    interface CSSProperties {
-        msoPaddingAlt?: string | number | undefined;
-        msoTextRaise?: string | number | undefined;
-    }
+  interface CSSProperties {
+    msoPaddingAlt?: string | number | undefined;
+    msoTextRaise?: string | number | undefined;
+  }
 }
 declare const Button: React.ForwardRefExoticComponent<Readonly<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">> & React.RefAttributes<HTMLAnchorElement>>;
-
-export { Button, type ButtonProps };
+//#endregion
+export { Button, ButtonProps };
+//# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -1,271 +0,181 @@
-"use strict";
+//#region rolldown:runtime
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 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;
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+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));
 
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  Button: () => Button
-});
-module.exports = __toCommonJS(index_exports);
+//#endregion
+let react = require("react");
+react = __toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = __toESM(react_jsx_runtime);
 
-// src/button.tsx
-var React = __toESM(require("react"));
-
-// src/utils/parse-padding.ts
+//#region src/utils/parse-padding.ts
+/**
+* converts padding value to `px` equivalent.
+* @example "1em" =\> 16
+*/
 function convertToPx(value) {
-  let px = 0;
-  if (!value) {
-    return px;
-  }
-  if (typeof value === "number") {
-    return value;
-  }
-  const matches = /^([\d.]+)(px|em|rem|%)$/.exec(value);
-  if (matches && matches.length === 3) {
-    const numValue = Number.parseFloat(matches[1]);
-    const unit = matches[2];
-    switch (unit) {
-      case "px":
-        return numValue;
-      case "em":
-      case "rem":
-        px = numValue * 16;
-        return px;
-      case "%":
-        px = numValue / 100 * 600;
-        return px;
-      default:
-        return numValue;
-    }
-  }
-  return 0;
+	let px = 0;
+	if (!value) return px;
+	if (typeof value === "number") return value;
+	const matches = /^([\d.]+)(px|em|rem|%)$/.exec(value);
+	if (matches && matches.length === 3) {
+		const numValue = Number.parseFloat(matches[1]);
+		switch (matches[2]) {
+			case "px": return numValue;
+			case "em":
+			case "rem":
+				px = numValue * 16;
+				return px;
+			case "%":
+				px = numValue / 100 * 600;
+				return px;
+			default: return numValue;
+		}
+	}
+	return 0;
 }
 function parsePaddingValue(value) {
-  if (typeof value === "number")
-    return {
-      paddingTop: value,
-      paddingBottom: value,
-      paddingLeft: value,
-      paddingRight: value
-    };
-  if (typeof value === "string") {
-    const values = value.toString().trim().split(/\s+/);
-    if (values.length === 1) {
-      return {
-        paddingTop: values[0],
-        paddingBottom: values[0],
-        paddingLeft: values[0],
-        paddingRight: values[0]
-      };
-    }
-    if (values.length === 2) {
-      return {
-        paddingTop: values[0],
-        paddingRight: values[1],
-        paddingBottom: values[0],
-        paddingLeft: values[1]
-      };
-    }
-    if (values.length === 3) {
-      return {
-        paddingTop: values[0],
-        paddingRight: values[1],
-        paddingBottom: values[2],
-        paddingLeft: values[1]
-      };
-    }
-    if (values.length === 4) {
-      return {
-        paddingTop: values[0],
-        paddingRight: values[1],
-        paddingBottom: values[2],
-        paddingLeft: values[3]
-      };
-    }
-  }
-  return {
-    paddingTop: void 0,
-    paddingBottom: void 0,
-    paddingLeft: void 0,
-    paddingRight: void 0
-  };
+	if (typeof value === "number") return {
+		paddingTop: value,
+		paddingBottom: value,
+		paddingLeft: value,
+		paddingRight: value
+	};
+	if (typeof value === "string") {
+		const values = value.toString().trim().split(/\s+/);
+		if (values.length === 1) return {
+			paddingTop: values[0],
+			paddingBottom: values[0],
+			paddingLeft: values[0],
+			paddingRight: values[0]
+		};
+		if (values.length === 2) return {
+			paddingTop: values[0],
+			paddingRight: values[1],
+			paddingBottom: values[0],
+			paddingLeft: values[1]
+		};
+		if (values.length === 3) return {
+			paddingTop: values[0],
+			paddingRight: values[1],
+			paddingBottom: values[2],
+			paddingLeft: values[1]
+		};
+		if (values.length === 4) return {
+			paddingTop: values[0],
+			paddingRight: values[1],
+			paddingBottom: values[2],
+			paddingLeft: values[3]
+		};
+	}
+	return {
+		paddingTop: void 0,
+		paddingBottom: void 0,
+		paddingLeft: void 0,
+		paddingRight: void 0
+	};
 }
+/**
+* Parses all the values out of a padding string to get the value for all padding props in `px`
+* @example e.g. "10px" =\> pt: 10, pr: 10, pb: 10, pl: 10
+*/
 function parsePadding(properties) {
-  let paddingTop;
-  let paddingRight;
-  let paddingBottom;
-  let paddingLeft;
-  for (const [key, value] of Object.entries(properties)) {
-    if (key === "padding") {
-      ({ paddingTop, paddingBottom, paddingLeft, paddingRight } = parsePaddingValue(value));
-    } else if (key === "paddingTop") {
-      paddingTop = value;
-    } else if (key === "paddingRight") {
-      paddingRight = value;
-    } else if (key === "paddingBottom") {
-      paddingBottom = value;
-    } else if (key === "paddingLeft") {
-      paddingLeft = value;
-    }
-  }
-  return {
-    paddingTop: paddingTop ? convertToPx(paddingTop) : void 0,
-    paddingRight: paddingRight ? convertToPx(paddingRight) : void 0,
-    paddingBottom: paddingBottom ? convertToPx(paddingBottom) : void 0,
-    paddingLeft: paddingLeft ? convertToPx(paddingLeft) : void 0
-  };
+	let paddingTop;
+	let paddingRight;
+	let paddingBottom;
+	let paddingLeft;
+	for (const [key, value] of Object.entries(properties)) if (key === "padding") ({paddingTop, paddingBottom, paddingLeft, paddingRight} = parsePaddingValue(value));
+	else if (key === "paddingTop") paddingTop = value;
+	else if (key === "paddingRight") paddingRight = value;
+	else if (key === "paddingBottom") paddingBottom = value;
+	else if (key === "paddingLeft") paddingLeft = value;
+	return {
+		paddingTop: paddingTop ? convertToPx(paddingTop) : void 0,
+		paddingRight: paddingRight ? convertToPx(paddingRight) : void 0,
+		paddingBottom: paddingBottom ? convertToPx(paddingBottom) : void 0,
+		paddingLeft: paddingLeft ? convertToPx(paddingLeft) : void 0
+	};
 }
 
-// src/utils/px-to-pt.ts
-var pxToPt = (px) => typeof px === "number" && !Number.isNaN(Number(px)) ? px * 3 / 4 : void 0;
+//#endregion
+//#region src/utils/px-to-pt.ts
+const pxToPt = (px) => typeof px === "number" && !Number.isNaN(Number(px)) ? px * 3 / 4 : void 0;
 
-// src/button.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var maxFontWidth = 5;
+//#endregion
+//#region src/button.tsx
+const maxFontWidth = 5;
+/**
+* Computes a msoFontWidth \<= 5 and a count of space characters that,
+* when applied, end up being as close to `expectedWidth` as possible.
+*/
 function computeFontWidthAndSpaceCount(expectedWidth) {
-  if (expectedWidth === 0) return [0, 0];
-  let smallestSpaceCount = 0;
-  const computeRequiredFontWidth = () => {
-    if (smallestSpaceCount > 0) {
-      return expectedWidth / smallestSpaceCount / 2;
-    }
-    return Number.POSITIVE_INFINITY;
-  };
-  while (computeRequiredFontWidth() > maxFontWidth) {
-    smallestSpaceCount++;
-  }
-  return [computeRequiredFontWidth(), smallestSpaceCount];
+	if (expectedWidth === 0) return [0, 0];
+	let smallestSpaceCount = 0;
+	const computeRequiredFontWidth = () => {
+		if (smallestSpaceCount > 0) return expectedWidth / smallestSpaceCount / 2;
+		return Number.POSITIVE_INFINITY;
+	};
+	while (computeRequiredFontWidth() > maxFontWidth) smallestSpaceCount++;
+	return [computeRequiredFontWidth(), smallestSpaceCount];
 }
-var Button = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, style, target = "_blank" } = _b, props = __objRest(_b, ["children", "style", "target"]);
-    const { paddingTop, paddingRight, paddingBottom, paddingLeft } = parsePadding(style != null ? style : {});
-    const y = (paddingTop != null ? paddingTop : 0) + (paddingBottom != null ? paddingBottom : 0);
-    const textRaise = pxToPt(y);
-    const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(
-      paddingLeft != null ? paddingLeft : 0
-    );
-    const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(
-      paddingRight != null ? paddingRight : 0
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "a",
-      __spreadProps(__spreadValues({}, props), {
-        ref,
-        style: __spreadProps(__spreadValues({
-          lineHeight: "100%",
-          textDecoration: "none",
-          display: "inline-block",
-          maxWidth: "100%",
-          msoPaddingAlt: "0px"
-        }, style), {
-          paddingTop,
-          paddingRight,
-          paddingBottom,
-          paddingLeft
-        }),
-        target,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "span",
-            {
-              dangerouslySetInnerHTML: {
-                // The `&#8202;` is as close to `1px` of an empty character as we can get, then, we use the `mso-font-width`
-                // to scale it according to what padding the developer wants. `mso-font-width` also does not allow for percentages
-                // >= 500% so we need to add extra spaces accordingly.
-                //
-                // See https://github.com/resend/react-email/issues/1512 for why we do not use letter-spacing instead.
-                __html: `<!--[if mso]><i style="mso-font-width:${plFontWidth * 100}%;mso-text-raise:${textRaise}" hidden>${"&#8202;".repeat(
-                  plSpaceCount
-                )}</i><![endif]-->`
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "span",
-            {
-              style: {
-                maxWidth: "100%",
-                display: "inline-block",
-                lineHeight: "120%",
-                msoPaddingAlt: "0px",
-                msoTextRaise: pxToPt(paddingBottom)
-              },
-              children
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "span",
-            {
-              dangerouslySetInnerHTML: {
-                __html: `<!--[if mso]><i style="mso-font-width:${prFontWidth * 100}%" hidden>${"&#8202;".repeat(
-                  prSpaceCount
-                )}&#8203;</i><![endif]-->`
-              }
-            }
-          )
-        ]
-      })
-    );
-  }
-);
+const Button = react.forwardRef(({ children, style, target = "_blank",...props }, ref) => {
+	const { paddingTop, paddingRight, paddingBottom, paddingLeft } = parsePadding(style ?? {});
+	const y = (paddingTop ?? 0) + (paddingBottom ?? 0);
+	const textRaise = pxToPt(y);
+	const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(paddingLeft ?? 0);
+	const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(paddingRight ?? 0);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+		...props,
+		ref,
+		style: {
+			lineHeight: "100%",
+			textDecoration: "none",
+			display: "inline-block",
+			maxWidth: "100%",
+			msoPaddingAlt: "0px",
+			...style,
+			paddingTop,
+			paddingRight,
+			paddingBottom,
+			paddingLeft
+		},
+		target,
+		children: [
+			/* @__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]-->` } }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					maxWidth: "100%",
+					display: "inline-block",
+					lineHeight: "120%",
+					msoPaddingAlt: "0px",
+					msoTextRaise: pxToPt(paddingBottom)
+				},
+				children
+			}),
+			/* @__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]-->` } })
+		]
+	});
+});
 Button.displayName = "Button";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Button
-});
+Button.tailwindTreatAsElement = true;
+
+//#endregion
+exports.Button = Button;

dist/index.mjs

@@ -1,237 +0,157 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
-// src/button.tsx
 import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 
-// src/utils/parse-padding.ts
+//#region src/utils/parse-padding.ts
+/**
+* converts padding value to `px` equivalent.
+* @example "1em" =\> 16
+*/
 function convertToPx(value) {
-  let px = 0;
-  if (!value) {
-    return px;
-  }
-  if (typeof value === "number") {
-    return value;
-  }
-  const matches = /^([\d.]+)(px|em|rem|%)$/.exec(value);
-  if (matches && matches.length === 3) {
-    const numValue = Number.parseFloat(matches[1]);
-    const unit = matches[2];
-    switch (unit) {
-      case "px":
-        return numValue;
-      case "em":
-      case "rem":
-        px = numValue * 16;
-        return px;
-      case "%":
-        px = numValue / 100 * 600;
-        return px;
-      default:
-        return numValue;
-    }
-  }
-  return 0;
+	let px = 0;
+	if (!value) return px;
+	if (typeof value === "number") return value;
+	const matches = /^([\d.]+)(px|em|rem|%)$/.exec(value);
+	if (matches && matches.length === 3) {
+		const numValue = Number.parseFloat(matches[1]);
+		switch (matches[2]) {
+			case "px": return numValue;
+			case "em":
+			case "rem":
+				px = numValue * 16;
+				return px;
+			case "%":
+				px = numValue / 100 * 600;
+				return px;
+			default: return numValue;
+		}
+	}
+	return 0;
 }
 function parsePaddingValue(value) {
-  if (typeof value === "number")
-    return {
-      paddingTop: value,
-      paddingBottom: value,
-      paddingLeft: value,
-      paddingRight: value
-    };
-  if (typeof value === "string") {
-    const values = value.toString().trim().split(/\s+/);
-    if (values.length === 1) {
-      return {
-        paddingTop: values[0],
-        paddingBottom: values[0],
-        paddingLeft: values[0],
-        paddingRight: values[0]
-      };
-    }
-    if (values.length === 2) {
-      return {
-        paddingTop: values[0],
-        paddingRight: values[1],
-        paddingBottom: values[0],
-        paddingLeft: values[1]
-      };
-    }
-    if (values.length === 3) {
-      return {
-        paddingTop: values[0],
-        paddingRight: values[1],
-        paddingBottom: values[2],
-        paddingLeft: values[1]
-      };
-    }
-    if (values.length === 4) {
-      return {
-        paddingTop: values[0],
-        paddingRight: values[1],
-        paddingBottom: values[2],
-        paddingLeft: values[3]
-      };
-    }
-  }
-  return {
-    paddingTop: void 0,
-    paddingBottom: void 0,
-    paddingLeft: void 0,
-    paddingRight: void 0
-  };
+	if (typeof value === "number") return {
+		paddingTop: value,
+		paddingBottom: value,
+		paddingLeft: value,
+		paddingRight: value
+	};
+	if (typeof value === "string") {
+		const values = value.toString().trim().split(/\s+/);
+		if (values.length === 1) return {
+			paddingTop: values[0],
+			paddingBottom: values[0],
+			paddingLeft: values[0],
+			paddingRight: values[0]
+		};
+		if (values.length === 2) return {
+			paddingTop: values[0],
+			paddingRight: values[1],
+			paddingBottom: values[0],
+			paddingLeft: values[1]
+		};
+		if (values.length === 3) return {
+			paddingTop: values[0],
+			paddingRight: values[1],
+			paddingBottom: values[2],
+			paddingLeft: values[1]
+		};
+		if (values.length === 4) return {
+			paddingTop: values[0],
+			paddingRight: values[1],
+			paddingBottom: values[2],
+			paddingLeft: values[3]
+		};
+	}
+	return {
+		paddingTop: void 0,
+		paddingBottom: void 0,
+		paddingLeft: void 0,
+		paddingRight: void 0
+	};
 }
+/**
+* Parses all the values out of a padding string to get the value for all padding props in `px`
+* @example e.g. "10px" =\> pt: 10, pr: 10, pb: 10, pl: 10
+*/
 function parsePadding(properties) {
-  let paddingTop;
-  let paddingRight;
-  let paddingBottom;
-  let paddingLeft;
-  for (const [key, value] of Object.entries(properties)) {
-    if (key === "padding") {
-      ({ paddingTop, paddingBottom, paddingLeft, paddingRight } = parsePaddingValue(value));
-    } else if (key === "paddingTop") {
-      paddingTop = value;
-    } else if (key === "paddingRight") {
-      paddingRight = value;
-    } else if (key === "paddingBottom") {
-      paddingBottom = value;
-    } else if (key === "paddingLeft") {
-      paddingLeft = value;
-    }
-  }
-  return {
-    paddingTop: paddingTop ? convertToPx(paddingTop) : void 0,
-    paddingRight: paddingRight ? convertToPx(paddingRight) : void 0,
-    paddingBottom: paddingBottom ? convertToPx(paddingBottom) : void 0,
-    paddingLeft: paddingLeft ? convertToPx(paddingLeft) : void 0
-  };
+	let paddingTop;
+	let paddingRight;
+	let paddingBottom;
+	let paddingLeft;
+	for (const [key, value] of Object.entries(properties)) if (key === "padding") ({paddingTop, paddingBottom, paddingLeft, paddingRight} = parsePaddingValue(value));
+	else if (key === "paddingTop") paddingTop = value;
+	else if (key === "paddingRight") paddingRight = value;
+	else if (key === "paddingBottom") paddingBottom = value;
+	else if (key === "paddingLeft") paddingLeft = value;
+	return {
+		paddingTop: paddingTop ? convertToPx(paddingTop) : void 0,
+		paddingRight: paddingRight ? convertToPx(paddingRight) : void 0,
+		paddingBottom: paddingBottom ? convertToPx(paddingBottom) : void 0,
+		paddingLeft: paddingLeft ? convertToPx(paddingLeft) : void 0
+	};
 }
 
-// src/utils/px-to-pt.ts
-var pxToPt = (px) => typeof px === "number" && !Number.isNaN(Number(px)) ? px * 3 / 4 : void 0;
+//#endregion
+//#region src/utils/px-to-pt.ts
+const pxToPt = (px) => typeof px === "number" && !Number.isNaN(Number(px)) ? px * 3 / 4 : void 0;
 
-// src/button.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var maxFontWidth = 5;
+//#endregion
+//#region src/button.tsx
+const maxFontWidth = 5;
+/**
+* Computes a msoFontWidth \<= 5 and a count of space characters that,
+* when applied, end up being as close to `expectedWidth` as possible.
+*/
 function computeFontWidthAndSpaceCount(expectedWidth) {
-  if (expectedWidth === 0) return [0, 0];
-  let smallestSpaceCount = 0;
-  const computeRequiredFontWidth = () => {
-    if (smallestSpaceCount > 0) {
-      return expectedWidth / smallestSpaceCount / 2;
-    }
-    return Number.POSITIVE_INFINITY;
-  };
-  while (computeRequiredFontWidth() > maxFontWidth) {
-    smallestSpaceCount++;
-  }
-  return [computeRequiredFontWidth(), smallestSpaceCount];
+	if (expectedWidth === 0) return [0, 0];
+	let smallestSpaceCount = 0;
+	const computeRequiredFontWidth = () => {
+		if (smallestSpaceCount > 0) return expectedWidth / smallestSpaceCount / 2;
+		return Number.POSITIVE_INFINITY;
+	};
+	while (computeRequiredFontWidth() > maxFontWidth) smallestSpaceCount++;
+	return [computeRequiredFontWidth(), smallestSpaceCount];
 }
-var Button = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, style, target = "_blank" } = _b, props = __objRest(_b, ["children", "style", "target"]);
-    const { paddingTop, paddingRight, paddingBottom, paddingLeft } = parsePadding(style != null ? style : {});
-    const y = (paddingTop != null ? paddingTop : 0) + (paddingBottom != null ? paddingBottom : 0);
-    const textRaise = pxToPt(y);
-    const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(
-      paddingLeft != null ? paddingLeft : 0
-    );
-    const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(
-      paddingRight != null ? paddingRight : 0
-    );
-    return /* @__PURE__ */ jsxs(
-      "a",
-      __spreadProps(__spreadValues({}, props), {
-        ref,
-        style: __spreadProps(__spreadValues({
-          lineHeight: "100%",
-          textDecoration: "none",
-          display: "inline-block",
-          maxWidth: "100%",
-          msoPaddingAlt: "0px"
-        }, style), {
-          paddingTop,
-          paddingRight,
-          paddingBottom,
-          paddingLeft
-        }),
-        target,
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              dangerouslySetInnerHTML: {
-                // The `&#8202;` is as close to `1px` of an empty character as we can get, then, we use the `mso-font-width`
-                // to scale it according to what padding the developer wants. `mso-font-width` also does not allow for percentages
-                // >= 500% so we need to add extra spaces accordingly.
-                //
-                // See https://github.com/resend/react-email/issues/1512 for why we do not use letter-spacing instead.
-                __html: `<!--[if mso]><i style="mso-font-width:${plFontWidth * 100}%;mso-text-raise:${textRaise}" hidden>${"&#8202;".repeat(
-                  plSpaceCount
-                )}</i><![endif]-->`
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                maxWidth: "100%",
-                display: "inline-block",
-                lineHeight: "120%",
-                msoPaddingAlt: "0px",
-                msoTextRaise: pxToPt(paddingBottom)
-              },
-              children
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              dangerouslySetInnerHTML: {
-                __html: `<!--[if mso]><i style="mso-font-width:${prFontWidth * 100}%" hidden>${"&#8202;".repeat(
-                  prSpaceCount
-                )}&#8203;</i><![endif]-->`
-              }
-            }
-          )
-        ]
-      })
-    );
-  }
-);
+const Button = React.forwardRef(({ children, style, target = "_blank",...props }, ref) => {
+	const { paddingTop, paddingRight, paddingBottom, paddingLeft } = parsePadding(style ?? {});
+	const y = (paddingTop ?? 0) + (paddingBottom ?? 0);
+	const textRaise = pxToPt(y);
+	const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(paddingLeft ?? 0);
+	const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(paddingRight ?? 0);
+	return /* @__PURE__ */ jsxs("a", {
+		...props,
+		ref,
+		style: {
+			lineHeight: "100%",
+			textDecoration: "none",
+			display: "inline-block",
+			maxWidth: "100%",
+			msoPaddingAlt: "0px",
+			...style,
+			paddingTop,
+			paddingRight,
+			paddingBottom,
+			paddingLeft
+		},
+		target,
+		children: [
+			/* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: `<!--[if mso]><i style="mso-font-width:${plFontWidth * 100}%;mso-text-raise:${textRaise}" hidden>${"&#8202;".repeat(plSpaceCount)}</i><![endif]-->` } }),
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					maxWidth: "100%",
+					display: "inline-block",
+					lineHeight: "120%",
+					msoPaddingAlt: "0px",
+					msoTextRaise: pxToPt(paddingBottom)
+				},
+				children
+			}),
+			/* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: `<!--[if mso]><i style="mso-font-width:${prFontWidth * 100}%" hidden>${"&#8202;".repeat(prSpaceCount)}&#8203;</i><![endif]-->` } })
+		]
+	});
+});
 Button.displayName = "Button";
-export {
-  Button
-};
+Button.tailwindTreatAsElement = true;
+
+//#endregion
+export { Button };
+//# sourceMappingURL=index.mjs.map

package.json

 {
   "name": "@react-email/button",
-  "version": "0.2.0",
+  "version": "0.2.1-tailwindv4.0",
   "description": "A link that is styled to look like a button",
@@ -42,3 +42,3 @@ "sideEffects": false,
     "typescript": "5.8.3",
-    "@react-email/render": "1.1.3",
+    "@react-email/render": "1.3.1",
     "tsconfig": "0.0.0"
@@ -50,4 +50,4 @@ },
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
-    "build:watch": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
+    "build": "tsdown src/index.ts --format esm,cjs --dts --external react",
+    "build:watch": "tsdown src/index.ts --format esm,cjs --dts --external react --watch",
     "clean": "rm -rf dist",
@@ -54,0 +54,0 @@ "test": "vitest run",

readme.md

@@ -7,7 +7,6 @@ ![React Email button cover](https://react.email/static/covers/button.png)
 <div align="center">
-<a href="https://react.email">Website</a> 
+<a href="https://react.email">Website</a>
 <span> · </span>
-<a href="https://github.com/resend/react-email">GitHub</a> 
-<span> · </span>
-<a href="https://react.email/discord">Discord</a>
+<a href="https://github.com/resend/react-email">GitHub</a>
+
 </div>
@@ -14,0 +13,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Improved metrics

Total package byte prevSize

28454

23.9%

Number of package files

10

42.86%

Worsened metrics

Lines of code

339

-33.4%

Number of lines in readme file

63

-1.56%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes