@react-email/heading - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/index.d.ts

 import * as React from 'react';
+import { Margin } from 'utils';
 
-interface HeadingOwnProps {
-}
-declare const Heading: React.ForwardRefExoticComponent<(Pick<Readonly<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
-    ref?: ((instance: HTMLHeadingElement | null) => void) | React.RefObject<HTMLHeadingElement> | null | undefined;
-} & {
-    as?: "h1" | undefined;
-} & HeadingOwnProps>, "key" | keyof React.HTMLAttributes<HTMLHeadingElement> | "as"> | Pick<Readonly<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
-    ref?: ((instance: HTMLHeadingElement | null) => void) | React.RefObject<HTMLHeadingElement> | null | undefined;
-} & {
-    as: "h2";
-} & HeadingOwnProps>, "key" | keyof React.HTMLAttributes<HTMLHeadingElement> | "as"> | Pick<Readonly<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
-    ref?: ((instance: HTMLHeadingElement | null) => void) | React.RefObject<HTMLHeadingElement> | null | undefined;
-} & {
-    as: "h3";
-} & HeadingOwnProps>, "key" | keyof React.HTMLAttributes<HTMLHeadingElement> | "as"> | Pick<Readonly<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
-    ref?: ((instance: HTMLHeadingElement | null) => void) | React.RefObject<HTMLHeadingElement> | null | undefined;
-} & {
-    as: "h4";
-} & HeadingOwnProps>, "key" | keyof React.HTMLAttributes<HTMLHeadingElement> | "as"> | Pick<Readonly<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
-    ref?: ((instance: HTMLHeadingElement | null) => void) | React.RefObject<HTMLHeadingElement> | null | undefined;
-} & {
-    as: "h5";
-} & HeadingOwnProps>, "key" | keyof React.HTMLAttributes<HTMLHeadingElement> | "as"> | Pick<Readonly<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
-    ref?: ((instance: HTMLHeadingElement | null) => void) | React.RefObject<HTMLHeadingElement> | null | undefined;
-} & {
-    as: "h6";
-} & HeadingOwnProps>, "key" | keyof React.HTMLAttributes<HTMLHeadingElement> | "as">) & React.RefAttributes<HTMLHeadingElement>>;
+interface HeadingOwnProps {}
+declare const Heading: React.ForwardRefExoticComponent<
+  (
+    | Pick<
+        Readonly<
+          Pick<
+            React.DetailedHTMLProps<
+              React.HTMLAttributes<HTMLHeadingElement>,
+              HTMLHeadingElement
+            >,
+            'key' | keyof React.HTMLAttributes<HTMLHeadingElement>
+          > & {
+            ref?:
+              | ((instance: HTMLHeadingElement | null) => void)
+              | React.RefObject<HTMLHeadingElement>
+              | null
+              | undefined;
+          } & {
+            as?: 'h1' | undefined;
+          } & HeadingOwnProps &
+            Margin
+        >,
+        | 'key'
+        | keyof React.HTMLAttributes<HTMLHeadingElement>
+        | 'as'
+        | keyof Margin
+      >
+    | Pick<
+        Readonly<
+          Pick<
+            React.DetailedHTMLProps<
+              React.HTMLAttributes<HTMLHeadingElement>,
+              HTMLHeadingElement
+            >,
+            'key' | keyof React.HTMLAttributes<HTMLHeadingElement>
+          > & {
+            ref?:
+              | ((instance: HTMLHeadingElement | null) => void)
+              | React.RefObject<HTMLHeadingElement>
+              | null
+              | undefined;
+          } & {
+            as: 'h2';
+          } & HeadingOwnProps &
+            Margin
+        >,
+        | 'key'
+        | keyof React.HTMLAttributes<HTMLHeadingElement>
+        | 'as'
+        | keyof Margin
+      >
+    | Pick<
+        Readonly<
+          Pick<
+            React.DetailedHTMLProps<
+              React.HTMLAttributes<HTMLHeadingElement>,
+              HTMLHeadingElement
+            >,
+            'key' | keyof React.HTMLAttributes<HTMLHeadingElement>
+          > & {
+            ref?:
+              | ((instance: HTMLHeadingElement | null) => void)
+              | React.RefObject<HTMLHeadingElement>
+              | null
+              | undefined;
+          } & {
+            as: 'h3';
+          } & HeadingOwnProps &
+            Margin
+        >,
+        | 'key'
+        | keyof React.HTMLAttributes<HTMLHeadingElement>
+        | 'as'
+        | keyof Margin
+      >
+    | Pick<
+        Readonly<
+          Pick<
+            React.DetailedHTMLProps<
+              React.HTMLAttributes<HTMLHeadingElement>,
+              HTMLHeadingElement
+            >,
+            'key' | keyof React.HTMLAttributes<HTMLHeadingElement>
+          > & {
+            ref?:
+              | ((instance: HTMLHeadingElement | null) => void)
+              | React.RefObject<HTMLHeadingElement>
+              | null
+              | undefined;
+          } & {
+            as: 'h4';
+          } & HeadingOwnProps &
+            Margin
+        >,
+        | 'key'
+        | keyof React.HTMLAttributes<HTMLHeadingElement>
+        | 'as'
+        | keyof Margin
+      >
+    | Pick<
+        Readonly<
+          Pick<
+            React.DetailedHTMLProps<
+              React.HTMLAttributes<HTMLHeadingElement>,
+              HTMLHeadingElement
+            >,
+            'key' | keyof React.HTMLAttributes<HTMLHeadingElement>
+          > & {
+            ref?:
+              | ((instance: HTMLHeadingElement | null) => void)
+              | React.RefObject<HTMLHeadingElement>
+              | null
+              | undefined;
+          } & {
+            as: 'h5';
+          } & HeadingOwnProps &
+            Margin
+        >,
+        | 'key'
+        | keyof React.HTMLAttributes<HTMLHeadingElement>
+        | 'as'
+        | keyof Margin
+      >
+    | Pick<
+        Readonly<
+          Pick<
+            React.DetailedHTMLProps<
+              React.HTMLAttributes<HTMLHeadingElement>,
+              HTMLHeadingElement
+            >,
+            'key' | keyof React.HTMLAttributes<HTMLHeadingElement>
+          > & {
+            ref?:
+              | ((instance: HTMLHeadingElement | null) => void)
+              | React.RefObject<HTMLHeadingElement>
+              | null
+              | undefined;
+          } & {
+            as: 'h6';
+          } & HeadingOwnProps &
+            Margin
+        >,
+        | 'key'
+        | keyof React.HTMLAttributes<HTMLHeadingElement>
+        | 'as'
+        | keyof Margin
+      >
+  ) &
+    React.RefAttributes<HTMLHeadingElement>
+>;
 
 export { Heading };

dist/index.js

@@ -36,31 +36,19 @@ "use strict";
 var React = __toESM(require("react"));
+var import_utils = require("utils");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Heading = React.forwardRef(({ as: Tag = "h1", children, style, ...props }, forwardedRef) => {
-  const styles = { ...style, ...getDefaultStyles(Tag) };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slot, {
-    ref: forwardedRef,
-    style: styles,
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, {
-      children
-    })
-  });
-});
-var getDefaultStyles = (as) => {
-  switch (as) {
-    default:
-    case "h1":
-      return { margin: ".67em 0", fontSize: "2em" };
-    case "h2":
-      return { margin: ".83em 0", fontSize: "1.5em" };
-    case "h3":
-      return { margin: "1em 0", fontSize: "1.17em" };
-    case "h4":
-      return { margin: "1.33em 0", fontSize: "1em" };
-    case "h5":
-      return { margin: "1.67em 0", fontSize: ".83em" };
-    case "h6":
-      return { margin: "2.33em 0", fontSize: ".67em" };
+var Heading = React.forwardRef(
+  ({ as: Tag = "h1", children, style, m, mx, my, mt, mr, mb, ml, ...props }, forwardedRef) => {
+    const marginStyles = (0, import_utils.withMargin)({ m, mx, my, mt, mr, mb, ml });
+    const styles = { marginStyles, ...style };
+    console.log({ styles });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slot, {
+      ref: forwardedRef,
+      style: styles,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, {
+        children
+      })
+    });
   }
-};
+);
 Heading.displayName = "Heading";
@@ -67,0 +55,0 @@ // Annotate the CommonJS export names for ESM import in node:

package.json

 {
   "name": "@react-email/heading",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A block of heading text",
@@ -5,0 +5,0 @@ "sideEffects": false,

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.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12166

increased by10.2%

Lines of code

232

increased by75.76%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes