@react-email/column 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.ts +2 -2
  2. package/dist/index.js +12 -11
  3. package/dist/index.mjs +12 -11
  4. package/package.json +14 -2
  5. package/readme.md +8 -3
package/dist/index.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import * as React from 'react';
2
2
 
3
- declare type RootProps = React.ComponentPropsWithoutRef<'div'>;
3
+ declare type RootProps = React.ComponentPropsWithoutRef<'td'>;
4
4
  interface ColumnProps extends RootProps {
5
5
  style?: React.CSSProperties;
6
6
  }
7
- declare const Column: React.ForwardRefExoticComponent<Readonly<ColumnProps> & React.RefAttributes<HTMLDivElement>>;
7
+ declare const Column: React.ForwardRefExoticComponent<Readonly<ColumnProps> & React.RefAttributes<HTMLTableDataCellElement>>;
8
8
 
9
9
  export { Column, ColumnProps };
package/dist/index.js CHANGED
@@ -36,21 +36,22 @@ var import_jsx_runtime = require("react/jsx-runtime");
36
36
  var Column = React.forwardRef(
37
37
  ({ children, style, ...props }, forwardedRef) => {
38
38
  const styleDefault = {
39
- display: "inline-block",
40
39
  width: "100%",
41
- fontSize: "0px",
42
- verticalAlign: "top",
40
+ display: "flex",
41
+ justifyContent: "center",
42
+ alignItems: "center",
43
43
  ...style
44
44
  };
45
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
46
- ref: forwardedRef,
47
- style: styleDefault,
48
- role: "presentation",
49
- ...props,
50
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", {
45
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
46
+ "td",
47
+ {
48
+ ref: forwardedRef,
49
+ style: styleDefault,
50
+ role: "presentation",
51
+ ...props,
51
52
  children
52
- })
53
- });
53
+ }
54
+ );
54
55
  }
55
56
  );
56
57
  Column.displayName = "Column";
package/dist/index.mjs CHANGED
@@ -4,21 +4,22 @@ import { jsx } from "react/jsx-runtime";
4
4
  var Column = React.forwardRef(
5
5
  ({ children, style, ...props }, forwardedRef) => {
6
6
  const styleDefault = {
7
- display: "inline-block",
8
7
  width: "100%",
9
- fontSize: "0px",
10
- verticalAlign: "top",
8
+ display: "flex",
9
+ justifyContent: "center",
10
+ alignItems: "center",
11
11
  ...style
12
12
  };
13
- return /* @__PURE__ */ jsx("div", {
14
- ref: forwardedRef,
15
- style: styleDefault,
16
- role: "presentation",
17
- ...props,
18
- children: /* @__PURE__ */ jsx("tbody", {
13
+ return /* @__PURE__ */ jsx(
14
+ "td",
15
+ {
16
+ ref: forwardedRef,
17
+ style: styleDefault,
18
+ role: "presentation",
19
+ ...props,
19
20
  children
20
- })
21
- });
21
+ }
22
+ );
22
23
  }
23
24
  );
24
25
  Column.displayName = "Column";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-email/column",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "description": "Display a column that separates content areas vertically in your email",
5
5
  "sideEffects": false,
6
6
  "main": "./dist/index.js",
@@ -20,6 +20,18 @@
20
20
  "format:check": "prettier --ignore-path ./../../.prettierignore --check \"**/*.{ts,tsx,md}\"",
21
21
  "format": "prettier --ignore-path ./../../.prettierignore --write \"**/*.{ts,tsx,md}\""
22
22
  },
23
+ "repository": {
24
+ "type": "git",
25
+ "url": "https://github.com/zenorocha/react-email.git",
26
+ "directory": "packages/column"
27
+ },
28
+ "keywords": [
29
+ "react",
30
+ "email"
31
+ ],
32
+ "engines": {
33
+ "node": ">=18.0.0"
34
+ },
23
35
  "dependencies": {
24
36
  "react": "18.2.0"
25
37
  },
@@ -40,4 +52,4 @@
40
52
  "publishConfig": {
41
53
  "access": "public"
42
54
  }
43
- }
55
+ }
package/readme.md CHANGED
@@ -1,4 +1,4 @@
1
- ![React Email Hr cover](https://assets.react.email/covers/hr.png)
1
+ ![React Email Column cover](https://react.email/static/covers/column.png)
2
2
 
3
3
  <div align="center"><strong>@react-email/column</strong></div>
4
4
  <div align="center">Display a column that separates content areas vertically in your email.</div>
@@ -32,11 +32,16 @@ npm install @react-email/column -E
32
32
  Add the component to your email template. Include styles where needed.
33
33
 
34
34
  ```jsx
35
+ import { Section } from '@react-email/section';
35
36
  import { Column } from '@react-email/column';
36
37
 
37
38
  const Email = () => {
38
39
  return(
39
- <Column>{/* Any content. */}<Column/>
40
+ <Section>
41
+ <Column>A<Column/>
42
+ <Column>B<Column/>
43
+ <Column>C<Column/>
44
+ </Section>
40
45
  );
41
46
  };
42
47
  ```
@@ -45,7 +50,7 @@ const Email = () => {
45
50
 
46
51
  This component was tested using the most popular email clients.
47
52
 
48
- | <img src="https://assets.react.email/icons/gmail.svg" width="48px" height="48px" alt="Gmail logo"> | <img src="https://assets.react.email/icons/apple-mail.svg" width="48px" height="48px" alt="Apple Mail"> | <img src="https://assets.react.email/icons/outlook.svg" width="48px" height="48px" alt="Outlook logo"> | <img src="https://assets.react.email/icons/yahoo-mail.svg" width="48px" height="48px" alt="Yahoo! Mail logo"> | <img src="https://assets.react.email/icons/hey.svg" width="48px" height="48px" alt="HEY logo"> | <img src="https://assets.react.email/icons/superhuman.svg" width="48px" height="48px" alt="Superhuman logo"> |
53
+ | <img src="https://react.email/static/icons/gmail.svg" width="48px" height="48px" alt="Gmail logo"> | <img src="https://react.email/static/icons/apple-mail.svg" width="48px" height="48px" alt="Apple Mail"> | <img src="https://react.email/static/icons/outlook.svg" width="48px" height="48px" alt="Outlook logo"> | <img src="https://react.email/static/icons/yahoo-mail.svg" width="48px" height="48px" alt="Yahoo! Mail logo"> | <img src="https://react.email/static/icons/hey.svg" width="48px" height="48px" alt="HEY logo"> | <img src="https://react.email/static/icons/superhuman.svg" width="48px" height="48px" alt="Superhuman logo"> |
49
54
  | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
50
55
  | Gmail ✔ | Apple Mail ✔ | Outlook ✔ | Yahoo! Mail ✔ | HEY ✔ | Superhuman ✔ |
51
56