@react-email/button 0.0.19 → 0.1.0-canary.0

package/dist/index.d.mts

@@ -1,6 +1,12 @@
 import * as React from 'react';
 
-type ButtonProps = Readonly<React.ComponentPropsWithoutRef<"a">>;
+type ButtonProps = Readonly<React.ComponentPropsWithoutRef<'a'>>;
+declare module 'react' {
+    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 };

package/dist/index.d.ts

@@ -1,6 +1,12 @@
 import * as React from 'react';
 
-type ButtonProps = Readonly<React.ComponentPropsWithoutRef<"a">>;
+type ButtonProps = Readonly<React.ComponentPropsWithoutRef<'a'>>;
+declare module 'react' {
+    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 };

package/dist/index.js

@@ -57,11 +57,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Button: () => Button
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/button.tsx
 var React = __toESM(require("react"));
@@ -77,7 +77,7 @@ function convertToPx(value) {
   }
   const matches = /^([\d.]+)(px|em|rem|%)$/.exec(value);
   if (matches && matches.length === 3) {
-    const numValue = parseFloat(matches[1]);
+    const numValue = Number.parseFloat(matches[1]);
     const unit = matches[2];
     switch (unit) {
       case "px":
@@ -92,67 +92,87 @@ function convertToPx(value) {
       default:
         return numValue;
     }
-  } else {
-    return 0;
   }
+  return 0;
 }
-function parsePadding({
-  padding = "",
-  paddingTop,
-  paddingRight,
-  paddingBottom,
-  paddingLeft
-}) {
-  let pt = 0;
-  let pr = 0;
-  let pb = 0;
-  let pl = 0;
-  if (typeof padding === "number") {
-    pt = padding;
-    pr = padding;
-    pb = padding;
-    pl = padding;
-  } else {
-    const values = padding.split(/\s+/);
-    switch (values.length) {
-      case 1:
-        pt = convertToPx(values[0]);
-        pr = convertToPx(values[0]);
-        pb = convertToPx(values[0]);
-        pl = convertToPx(values[0]);
-        break;
-      case 2:
-        pt = convertToPx(values[0]);
-        pb = convertToPx(values[0]);
-        pr = convertToPx(values[1]);
-        pl = convertToPx(values[1]);
-        break;
-      case 3:
-        pt = convertToPx(values[0]);
-        pr = convertToPx(values[1]);
-        pl = convertToPx(values[1]);
-        pb = convertToPx(values[2]);
-        break;
-      case 4:
-        pt = convertToPx(values[0]);
-        pr = convertToPx(values[1]);
-        pb = convertToPx(values[2]);
-        pl = convertToPx(values[3]);
-        break;
-      default:
-        break;
+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
+  };
+}
+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 {
-    pt: paddingTop ? convertToPx(paddingTop) : pt,
-    pr: paddingRight ? convertToPx(paddingRight) : pr,
-    pb: paddingBottom ? convertToPx(paddingBottom) : pb,
-    pl: paddingLeft ? convertToPx(paddingLeft) : pl
+    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" && !isNaN(Number(px)) ? px * 3 / 4 : null;
+var 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");
@@ -164,7 +184,7 @@ function computeFontWidthAndSpaceCount(expectedWidth) {
     if (smallestSpaceCount > 0) {
       return expectedWidth / smallestSpaceCount / 2;
     }
-    return Infinity;
+    return Number.POSITIVE_INFINITY;
   };
   while (computeRequiredFontWidth() > maxFontWidth) {
     smallestSpaceCount++;
@@ -174,23 +194,31 @@ function computeFontWidthAndSpaceCount(expectedWidth) {
 var Button = React.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, style, target = "_blank" } = _b, props = __objRest(_b, ["children", "style", "target"]);
-    var _a2, _b2, _c, _d;
-    const { pt, pr, pb, pl } = parsePadding({
-      padding: style == null ? void 0 : style.padding,
-      paddingLeft: (_a2 = style == null ? void 0 : style.paddingLeft) != null ? _a2 : style == null ? void 0 : style.paddingInline,
-      paddingRight: (_b2 = style == null ? void 0 : style.paddingRight) != null ? _b2 : style == null ? void 0 : style.paddingInline,
-      paddingTop: (_c = style == null ? void 0 : style.paddingTop) != null ? _c : style == null ? void 0 : style.paddingBlock,
-      paddingBottom: (_d = style == null ? void 0 : style.paddingBottom) != null ? _d : style == null ? void 0 : style.paddingBlock
-    });
-    const y = pt + pb;
+    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(pl);
-    const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(pr);
+    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: buttonStyle(__spreadProps(__spreadValues({}, style), { pt, pr, pb, pl })),
+        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)(
@@ -208,7 +236,19 @@ var Button = React.forwardRef(
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: buttonTextStyle(pb), children }),
+          /* @__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",
             {
@@ -225,27 +265,6 @@ var Button = React.forwardRef(
   }
 );
 Button.displayName = "Button";
-var buttonStyle = (style) => {
-  const _a = style || {}, { pt, pr, pb, pl } = _a, rest = __objRest(_a, ["pt", "pr", "pb", "pl"]);
-  return __spreadProps(__spreadValues({
-    lineHeight: "100%",
-    textDecoration: "none",
-    display: "inline-block",
-    maxWidth: "100%",
-    msoPaddingAlt: "0px"
-  }, rest), {
-    padding: `${pt}px ${pr}px ${pb}px ${pl}px`
-  });
-};
-var buttonTextStyle = (pb) => {
-  return {
-    maxWidth: "100%",
-    display: "inline-block",
-    lineHeight: "120%",
-    msoPaddingAlt: "0px",
-    msoTextRaise: pxToPt(pb || 0)
-  };
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button

package/dist/index.mjs

@@ -44,7 +44,7 @@ function convertToPx(value) {
   }
   const matches = /^([\d.]+)(px|em|rem|%)$/.exec(value);
   if (matches && matches.length === 3) {
-    const numValue = parseFloat(matches[1]);
+    const numValue = Number.parseFloat(matches[1]);
     const unit = matches[2];
     switch (unit) {
       case "px":
@@ -59,67 +59,87 @@ function convertToPx(value) {
       default:
         return numValue;
     }
-  } else {
-    return 0;
   }
+  return 0;
 }
-function parsePadding({
-  padding = "",
-  paddingTop,
-  paddingRight,
-  paddingBottom,
-  paddingLeft
-}) {
-  let pt = 0;
-  let pr = 0;
-  let pb = 0;
-  let pl = 0;
-  if (typeof padding === "number") {
-    pt = padding;
-    pr = padding;
-    pb = padding;
-    pl = padding;
-  } else {
-    const values = padding.split(/\s+/);
-    switch (values.length) {
-      case 1:
-        pt = convertToPx(values[0]);
-        pr = convertToPx(values[0]);
-        pb = convertToPx(values[0]);
-        pl = convertToPx(values[0]);
-        break;
-      case 2:
-        pt = convertToPx(values[0]);
-        pb = convertToPx(values[0]);
-        pr = convertToPx(values[1]);
-        pl = convertToPx(values[1]);
-        break;
-      case 3:
-        pt = convertToPx(values[0]);
-        pr = convertToPx(values[1]);
-        pl = convertToPx(values[1]);
-        pb = convertToPx(values[2]);
-        break;
-      case 4:
-        pt = convertToPx(values[0]);
-        pr = convertToPx(values[1]);
-        pb = convertToPx(values[2]);
-        pl = convertToPx(values[3]);
-        break;
-      default:
-        break;
+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
+  };
+}
+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 {
-    pt: paddingTop ? convertToPx(paddingTop) : pt,
-    pr: paddingRight ? convertToPx(paddingRight) : pr,
-    pb: paddingBottom ? convertToPx(paddingBottom) : pb,
-    pl: paddingLeft ? convertToPx(paddingLeft) : pl
+    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" && !isNaN(Number(px)) ? px * 3 / 4 : null;
+var pxToPt = (px) => typeof px === "number" && !Number.isNaN(Number(px)) ? px * 3 / 4 : void 0;
 
 // src/button.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -131,7 +151,7 @@ function computeFontWidthAndSpaceCount(expectedWidth) {
     if (smallestSpaceCount > 0) {
       return expectedWidth / smallestSpaceCount / 2;
     }
-    return Infinity;
+    return Number.POSITIVE_INFINITY;
   };
   while (computeRequiredFontWidth() > maxFontWidth) {
     smallestSpaceCount++;
@@ -141,23 +161,31 @@ function computeFontWidthAndSpaceCount(expectedWidth) {
 var Button = React.forwardRef(
   (_a, ref) => {
     var _b = _a, { children, style, target = "_blank" } = _b, props = __objRest(_b, ["children", "style", "target"]);
-    var _a2, _b2, _c, _d;
-    const { pt, pr, pb, pl } = parsePadding({
-      padding: style == null ? void 0 : style.padding,
-      paddingLeft: (_a2 = style == null ? void 0 : style.paddingLeft) != null ? _a2 : style == null ? void 0 : style.paddingInline,
-      paddingRight: (_b2 = style == null ? void 0 : style.paddingRight) != null ? _b2 : style == null ? void 0 : style.paddingInline,
-      paddingTop: (_c = style == null ? void 0 : style.paddingTop) != null ? _c : style == null ? void 0 : style.paddingBlock,
-      paddingBottom: (_d = style == null ? void 0 : style.paddingBottom) != null ? _d : style == null ? void 0 : style.paddingBlock
-    });
-    const y = pt + pb;
+    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(pl);
-    const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(pr);
+    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: buttonStyle(__spreadProps(__spreadValues({}, style), { pt, pr, pb, pl })),
+        style: __spreadProps(__spreadValues({
+          lineHeight: "100%",
+          textDecoration: "none",
+          display: "inline-block",
+          maxWidth: "100%",
+          msoPaddingAlt: "0px"
+        }, style), {
+          paddingTop,
+          paddingRight,
+          paddingBottom,
+          paddingLeft
+        }),
         target,
         children: [
           /* @__PURE__ */ jsx(
@@ -175,7 +203,19 @@ var Button = React.forwardRef(
               }
             }
           ),
-          /* @__PURE__ */ jsx("span", { style: buttonTextStyle(pb), children }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                maxWidth: "100%",
+                display: "inline-block",
+                lineHeight: "120%",
+                msoPaddingAlt: "0px",
+                msoTextRaise: pxToPt(paddingBottom)
+              },
+              children
+            }
+          ),
           /* @__PURE__ */ jsx(
             "span",
             {
@@ -192,27 +232,6 @@ var Button = React.forwardRef(
   }
 );
 Button.displayName = "Button";
-var buttonStyle = (style) => {
-  const _a = style || {}, { pt, pr, pb, pl } = _a, rest = __objRest(_a, ["pt", "pr", "pb", "pl"]);
-  return __spreadProps(__spreadValues({
-    lineHeight: "100%",
-    textDecoration: "none",
-    display: "inline-block",
-    maxWidth: "100%",
-    msoPaddingAlt: "0px"
-  }, rest), {
-    padding: `${pt}px ${pr}px ${pb}px ${pl}px`
-  });
-};
-var buttonTextStyle = (pb) => {
-  return {
-    maxWidth: "100%",
-    display: "inline-block",
-    lineHeight: "120%",
-    msoPaddingAlt: "0px",
-    msoTextRaise: pxToPt(pb || 0)
-  };
-};
 export {
   Button
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/button",
-  "version": "0.0.19",
+  "version": "0.1.0-canary.0",
   "description": "A link that is styled to look like a button",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -38,9 +38,8 @@
     "react": "^18.0 || ^19.0 || ^19.0.0-rc"
   },
   "devDependencies": {
-    "typescript": "5.1.6",
-    "@react-email/render": "1.0.3",
-    "eslint-config-custom": "0.0.0",
+    "typescript": "5.8.3",
+    "@react-email/render": "1.1.2-canary.0",
     "tsconfig": "0.0.0"
   },
   "publishConfig": {
@@ -50,7 +49,6 @@
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
     "clean": "rm -rf dist",
     "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
-    "lint": "eslint .",
     "test:watch": "vitest",
     "test": "vitest run"
   }