@csg-org/block-columns-container 0.0.4-alpha.3 → 0.0.4-alpha.4

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.mts +95 -0
  2. package/dist/index.d.ts +95 -0
  3. package/dist/index.js +137 -0
  4. package/dist/index.mjs +101 -0
  5. package/package.json +1 -1
package/dist/index.d.mts ADDED
@@ -0,0 +1,95 @@
1
+ import React from 'react';
2
+ import { z } from 'zod';
3
+
4
+ declare const ColumnsContainerPropsSchema: z.ZodObject<{
5
+ style: z.ZodNullable<z.ZodOptional<z.ZodObject<{
6
+ backgroundColor: z.ZodOptional<z.ZodNullable<z.ZodString>>;
7
+ padding: z.ZodNullable<z.ZodOptional<z.ZodObject<{
8
+ top: z.ZodNumber;
9
+ bottom: z.ZodNumber;
10
+ right: z.ZodNumber;
11
+ left: z.ZodNumber;
12
+ }, "strip", z.ZodTypeAny, {
13
+ top: number;
14
+ bottom: number;
15
+ right: number;
16
+ left: number;
17
+ }, {
18
+ top: number;
19
+ bottom: number;
20
+ right: number;
21
+ left: number;
22
+ }>>>;
23
+ }, "strip", z.ZodTypeAny, {
24
+ backgroundColor?: string | null | undefined;
25
+ padding?: {
26
+ top: number;
27
+ bottom: number;
28
+ right: number;
29
+ left: number;
30
+ } | null | undefined;
31
+ }, {
32
+ backgroundColor?: string | null | undefined;
33
+ padding?: {
34
+ top: number;
35
+ bottom: number;
36
+ right: number;
37
+ left: number;
38
+ } | null | undefined;
39
+ }>>>;
40
+ props: z.ZodNullable<z.ZodOptional<z.ZodObject<{
41
+ fixedWidths: z.ZodNullable<z.ZodOptional<z.ZodTuple<[z.ZodOptional<z.ZodNullable<z.ZodNumber>>, z.ZodOptional<z.ZodNullable<z.ZodNumber>>, z.ZodOptional<z.ZodNullable<z.ZodNumber>>], null>>>;
42
+ columnsCount: z.ZodNullable<z.ZodOptional<z.ZodUnion<[z.ZodLiteral<2>, z.ZodLiteral<3>]>>>;
43
+ columnsGap: z.ZodNullable<z.ZodOptional<z.ZodNumber>>;
44
+ contentAlignment: z.ZodNullable<z.ZodOptional<z.ZodEnum<["top", "middle", "bottom"]>>>;
45
+ }, "strip", z.ZodTypeAny, {
46
+ fixedWidths?: [number | null | undefined, number | null | undefined, number | null | undefined] | null | undefined;
47
+ columnsCount?: 2 | 3 | null | undefined;
48
+ columnsGap?: number | null | undefined;
49
+ contentAlignment?: "top" | "bottom" | "middle" | null | undefined;
50
+ }, {
51
+ fixedWidths?: [number | null | undefined, number | null | undefined, number | null | undefined] | null | undefined;
52
+ columnsCount?: 2 | 3 | null | undefined;
53
+ columnsGap?: number | null | undefined;
54
+ contentAlignment?: "top" | "bottom" | "middle" | null | undefined;
55
+ }>>>;
56
+ }, "strip", z.ZodTypeAny, {
57
+ style?: {
58
+ backgroundColor?: string | null | undefined;
59
+ padding?: {
60
+ top: number;
61
+ bottom: number;
62
+ right: number;
63
+ left: number;
64
+ } | null | undefined;
65
+ } | null | undefined;
66
+ props?: {
67
+ fixedWidths?: [number | null | undefined, number | null | undefined, number | null | undefined] | null | undefined;
68
+ columnsCount?: 2 | 3 | null | undefined;
69
+ columnsGap?: number | null | undefined;
70
+ contentAlignment?: "top" | "bottom" | "middle" | null | undefined;
71
+ } | null | undefined;
72
+ }, {
73
+ style?: {
74
+ backgroundColor?: string | null | undefined;
75
+ padding?: {
76
+ top: number;
77
+ bottom: number;
78
+ right: number;
79
+ left: number;
80
+ } | null | undefined;
81
+ } | null | undefined;
82
+ props?: {
83
+ fixedWidths?: [number | null | undefined, number | null | undefined, number | null | undefined] | null | undefined;
84
+ columnsCount?: 2 | 3 | null | undefined;
85
+ columnsGap?: number | null | undefined;
86
+ contentAlignment?: "top" | "bottom" | "middle" | null | undefined;
87
+ } | null | undefined;
88
+ }>;
89
+ type TColumn = JSX.Element | JSX.Element[] | null;
90
+ type ColumnsContainerProps = z.infer<typeof ColumnsContainerPropsSchema> & {
91
+ columns?: TColumn[];
92
+ };
93
+ declare function ColumnsContainer({ style, columns, props }: ColumnsContainerProps): React.JSX.Element;
94
+
95
+ export { ColumnsContainer, type ColumnsContainerProps, ColumnsContainerPropsSchema };
package/dist/index.d.ts ADDED
@@ -0,0 +1,95 @@
1
+ import React from 'react';
2
+ import { z } from 'zod';
3
+
4
+ declare const ColumnsContainerPropsSchema: z.ZodObject<{
5
+ style: z.ZodNullable<z.ZodOptional<z.ZodObject<{
6
+ backgroundColor: z.ZodOptional<z.ZodNullable<z.ZodString>>;
7
+ padding: z.ZodNullable<z.ZodOptional<z.ZodObject<{
8
+ top: z.ZodNumber;
9
+ bottom: z.ZodNumber;
10
+ right: z.ZodNumber;
11
+ left: z.ZodNumber;
12
+ }, "strip", z.ZodTypeAny, {
13
+ top: number;
14
+ bottom: number;
15
+ right: number;
16
+ left: number;
17
+ }, {
18
+ top: number;
19
+ bottom: number;
20
+ right: number;
21
+ left: number;
22
+ }>>>;
23
+ }, "strip", z.ZodTypeAny, {
24
+ backgroundColor?: string | null | undefined;
25
+ padding?: {
26
+ top: number;
27
+ bottom: number;
28
+ right: number;
29
+ left: number;
30
+ } | null | undefined;
31
+ }, {
32
+ backgroundColor?: string | null | undefined;
33
+ padding?: {
34
+ top: number;
35
+ bottom: number;
36
+ right: number;
37
+ left: number;
38
+ } | null | undefined;
39
+ }>>>;
40
+ props: z.ZodNullable<z.ZodOptional<z.ZodObject<{
41
+ fixedWidths: z.ZodNullable<z.ZodOptional<z.ZodTuple<[z.ZodOptional<z.ZodNullable<z.ZodNumber>>, z.ZodOptional<z.ZodNullable<z.ZodNumber>>, z.ZodOptional<z.ZodNullable<z.ZodNumber>>], null>>>;
42
+ columnsCount: z.ZodNullable<z.ZodOptional<z.ZodUnion<[z.ZodLiteral<2>, z.ZodLiteral<3>]>>>;
43
+ columnsGap: z.ZodNullable<z.ZodOptional<z.ZodNumber>>;
44
+ contentAlignment: z.ZodNullable<z.ZodOptional<z.ZodEnum<["top", "middle", "bottom"]>>>;
45
+ }, "strip", z.ZodTypeAny, {
46
+ fixedWidths?: [number | null | undefined, number | null | undefined, number | null | undefined] | null | undefined;
47
+ columnsCount?: 2 | 3 | null | undefined;
48
+ columnsGap?: number | null | undefined;
49
+ contentAlignment?: "top" | "bottom" | "middle" | null | undefined;
50
+ }, {
51
+ fixedWidths?: [number | null | undefined, number | null | undefined, number | null | undefined] | null | undefined;
52
+ columnsCount?: 2 | 3 | null | undefined;
53
+ columnsGap?: number | null | undefined;
54
+ contentAlignment?: "top" | "bottom" | "middle" | null | undefined;
55
+ }>>>;
56
+ }, "strip", z.ZodTypeAny, {
57
+ style?: {
58
+ backgroundColor?: string | null | undefined;
59
+ padding?: {
60
+ top: number;
61
+ bottom: number;
62
+ right: number;
63
+ left: number;
64
+ } | null | undefined;
65
+ } | null | undefined;
66
+ props?: {
67
+ fixedWidths?: [number | null | undefined, number | null | undefined, number | null | undefined] | null | undefined;
68
+ columnsCount?: 2 | 3 | null | undefined;
69
+ columnsGap?: number | null | undefined;
70
+ contentAlignment?: "top" | "bottom" | "middle" | null | undefined;
71
+ } | null | undefined;
72
+ }, {
73
+ style?: {
74
+ backgroundColor?: string | null | undefined;
75
+ padding?: {
76
+ top: number;
77
+ bottom: number;
78
+ right: number;
79
+ left: number;
80
+ } | null | undefined;
81
+ } | null | undefined;
82
+ props?: {
83
+ fixedWidths?: [number | null | undefined, number | null | undefined, number | null | undefined] | null | undefined;
84
+ columnsCount?: 2 | 3 | null | undefined;
85
+ columnsGap?: number | null | undefined;
86
+ contentAlignment?: "top" | "bottom" | "middle" | null | undefined;
87
+ } | null | undefined;
88
+ }>;
89
+ type TColumn = JSX.Element | JSX.Element[] | null;
90
+ type ColumnsContainerProps = z.infer<typeof ColumnsContainerPropsSchema> & {
91
+ columns?: TColumn[];
92
+ };
93
+ declare function ColumnsContainer({ style, columns, props }: ColumnsContainerProps): React.JSX.Element;
94
+
95
+ export { ColumnsContainer, type ColumnsContainerProps, ColumnsContainerPropsSchema };
package/dist/index.js ADDED
@@ -0,0 +1,137 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+
30
+ // src/index.tsx
31
+ var index_exports = {};
32
+ __export(index_exports, {
33
+ ColumnsContainer: () => ColumnsContainer,
34
+ ColumnsContainerPropsSchema: () => ColumnsContainerPropsSchema
35
+ });
36
+ module.exports = __toCommonJS(index_exports);
37
+ var import_react = __toESM(require("react"));
38
+ var import_zod = require("zod");
39
+ var COLOR_SCHEMA = import_zod.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
40
+ var PADDING_SCHEMA = import_zod.z.object({
41
+ top: import_zod.z.number(),
42
+ bottom: import_zod.z.number(),
43
+ right: import_zod.z.number(),
44
+ left: import_zod.z.number()
45
+ }).optional().nullable();
46
+ var FIXED_WIDTHS_SCHEMA = import_zod.z.tuple([import_zod.z.number().nullish(), import_zod.z.number().nullish(), import_zod.z.number().nullish()]).optional().nullable();
47
+ var getPadding = (padding) => padding ? `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px` : void 0;
48
+ var ColumnsContainerPropsSchema = import_zod.z.object({
49
+ style: import_zod.z.object({
50
+ backgroundColor: COLOR_SCHEMA,
51
+ padding: PADDING_SCHEMA
52
+ }).optional().nullable(),
53
+ props: import_zod.z.object({
54
+ fixedWidths: FIXED_WIDTHS_SCHEMA,
55
+ columnsCount: import_zod.z.union([import_zod.z.literal(2), import_zod.z.literal(3)]).optional().nullable(),
56
+ columnsGap: import_zod.z.number().optional().nullable(),
57
+ contentAlignment: import_zod.z.enum(["top", "middle", "bottom"]).optional().nullable()
58
+ }).optional().nullable()
59
+ });
60
+ var ColumnsContainerPropsDefaults = {
61
+ columnsCount: 2,
62
+ columnsGap: 0,
63
+ contentAlignment: "middle"
64
+ };
65
+ function ColumnsContainer({ style, columns, props }) {
66
+ var _a, _b, _c, _d;
67
+ const wStyle = {
68
+ backgroundColor: (_a = style == null ? void 0 : style.backgroundColor) != null ? _a : void 0,
69
+ padding: getPadding(style == null ? void 0 : style.padding)
70
+ };
71
+ const blockProps = {
72
+ columnsCount: (_b = props == null ? void 0 : props.columnsCount) != null ? _b : ColumnsContainerPropsDefaults.columnsCount,
73
+ columnsGap: (_c = props == null ? void 0 : props.columnsGap) != null ? _c : ColumnsContainerPropsDefaults.columnsGap,
74
+ contentAlignment: (_d = props == null ? void 0 : props.contentAlignment) != null ? _d : ColumnsContainerPropsDefaults.contentAlignment,
75
+ fixedWidths: props == null ? void 0 : props.fixedWidths
76
+ };
77
+ return /* @__PURE__ */ import_react.default.createElement("div", { style: wStyle }, /* @__PURE__ */ import_react.default.createElement(
78
+ "table",
79
+ {
80
+ align: "center",
81
+ width: "100%",
82
+ cellPadding: "0",
83
+ border: 0,
84
+ style: { tableLayout: "fixed", borderCollapse: "collapse" }
85
+ },
86
+ /* @__PURE__ */ import_react.default.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ import_react.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ import_react.default.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ import_react.default.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ import_react.default.createElement(TableCell, { index: 2, props: blockProps, columns })))
87
+ ));
88
+ }
89
+ function TableCell({ index, props, columns }) {
90
+ var _a, _b, _c, _d, _e;
91
+ const contentAlignment = (_a = props == null ? void 0 : props.contentAlignment) != null ? _a : ColumnsContainerPropsDefaults.contentAlignment;
92
+ const columnsCount = (_b = props == null ? void 0 : props.columnsCount) != null ? _b : ColumnsContainerPropsDefaults.columnsCount;
93
+ if (columnsCount === 2 && index === 2) {
94
+ return null;
95
+ }
96
+ const style = {
97
+ boxSizing: "content-box",
98
+ verticalAlign: contentAlignment,
99
+ paddingLeft: getPaddingBefore(index, props),
100
+ paddingRight: getPaddingAfter(index, props),
101
+ width: (_d = (_c = props.fixedWidths) == null ? void 0 : _c[index]) != null ? _d : void 0
102
+ };
103
+ const children = (_e = columns && columns[index]) != null ? _e : null;
104
+ return /* @__PURE__ */ import_react.default.createElement("td", { style }, children);
105
+ }
106
+ function getPaddingBefore(index, { columnsGap, columnsCount }) {
107
+ if (index === 0) {
108
+ return 0;
109
+ }
110
+ if (columnsCount === 2) {
111
+ return columnsGap / 2;
112
+ }
113
+ if (index === 1) {
114
+ return columnsGap / 3;
115
+ }
116
+ return 2 * columnsGap / 3;
117
+ }
118
+ function getPaddingAfter(index, { columnsGap, columnsCount }) {
119
+ if (columnsCount === 2) {
120
+ if (index === 0) {
121
+ return columnsGap / 2;
122
+ }
123
+ return 0;
124
+ }
125
+ if (index === 0) {
126
+ return 2 * columnsGap / 3;
127
+ }
128
+ if (index === 1) {
129
+ return columnsGap / 3;
130
+ }
131
+ return 0;
132
+ }
133
+ // Annotate the CommonJS export names for ESM import in node:
134
+ 0 && (module.exports = {
135
+ ColumnsContainer,
136
+ ColumnsContainerPropsSchema
137
+ });
package/dist/index.mjs ADDED
@@ -0,0 +1,101 @@
1
+ // src/index.tsx
2
+ import React from "react";
3
+ import { z } from "zod";
4
+ var COLOR_SCHEMA = z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
5
+ var PADDING_SCHEMA = z.object({
6
+ top: z.number(),
7
+ bottom: z.number(),
8
+ right: z.number(),
9
+ left: z.number()
10
+ }).optional().nullable();
11
+ var FIXED_WIDTHS_SCHEMA = z.tuple([z.number().nullish(), z.number().nullish(), z.number().nullish()]).optional().nullable();
12
+ var getPadding = (padding) => padding ? `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px` : void 0;
13
+ var ColumnsContainerPropsSchema = z.object({
14
+ style: z.object({
15
+ backgroundColor: COLOR_SCHEMA,
16
+ padding: PADDING_SCHEMA
17
+ }).optional().nullable(),
18
+ props: z.object({
19
+ fixedWidths: FIXED_WIDTHS_SCHEMA,
20
+ columnsCount: z.union([z.literal(2), z.literal(3)]).optional().nullable(),
21
+ columnsGap: z.number().optional().nullable(),
22
+ contentAlignment: z.enum(["top", "middle", "bottom"]).optional().nullable()
23
+ }).optional().nullable()
24
+ });
25
+ var ColumnsContainerPropsDefaults = {
26
+ columnsCount: 2,
27
+ columnsGap: 0,
28
+ contentAlignment: "middle"
29
+ };
30
+ function ColumnsContainer({ style, columns, props }) {
31
+ var _a, _b, _c, _d;
32
+ const wStyle = {
33
+ backgroundColor: (_a = style == null ? void 0 : style.backgroundColor) != null ? _a : void 0,
34
+ padding: getPadding(style == null ? void 0 : style.padding)
35
+ };
36
+ const blockProps = {
37
+ columnsCount: (_b = props == null ? void 0 : props.columnsCount) != null ? _b : ColumnsContainerPropsDefaults.columnsCount,
38
+ columnsGap: (_c = props == null ? void 0 : props.columnsGap) != null ? _c : ColumnsContainerPropsDefaults.columnsGap,
39
+ contentAlignment: (_d = props == null ? void 0 : props.contentAlignment) != null ? _d : ColumnsContainerPropsDefaults.contentAlignment,
40
+ fixedWidths: props == null ? void 0 : props.fixedWidths
41
+ };
42
+ return /* @__PURE__ */ React.createElement("div", { style: wStyle }, /* @__PURE__ */ React.createElement(
43
+ "table",
44
+ {
45
+ align: "center",
46
+ width: "100%",
47
+ cellPadding: "0",
48
+ border: 0,
49
+ style: { tableLayout: "fixed", borderCollapse: "collapse" }
50
+ },
51
+ /* @__PURE__ */ React.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React.createElement(TableCell, { index: 2, props: blockProps, columns })))
52
+ ));
53
+ }
54
+ function TableCell({ index, props, columns }) {
55
+ var _a, _b, _c, _d, _e;
56
+ const contentAlignment = (_a = props == null ? void 0 : props.contentAlignment) != null ? _a : ColumnsContainerPropsDefaults.contentAlignment;
57
+ const columnsCount = (_b = props == null ? void 0 : props.columnsCount) != null ? _b : ColumnsContainerPropsDefaults.columnsCount;
58
+ if (columnsCount === 2 && index === 2) {
59
+ return null;
60
+ }
61
+ const style = {
62
+ boxSizing: "content-box",
63
+ verticalAlign: contentAlignment,
64
+ paddingLeft: getPaddingBefore(index, props),
65
+ paddingRight: getPaddingAfter(index, props),
66
+ width: (_d = (_c = props.fixedWidths) == null ? void 0 : _c[index]) != null ? _d : void 0
67
+ };
68
+ const children = (_e = columns && columns[index]) != null ? _e : null;
69
+ return /* @__PURE__ */ React.createElement("td", { style }, children);
70
+ }
71
+ function getPaddingBefore(index, { columnsGap, columnsCount }) {
72
+ if (index === 0) {
73
+ return 0;
74
+ }
75
+ if (columnsCount === 2) {
76
+ return columnsGap / 2;
77
+ }
78
+ if (index === 1) {
79
+ return columnsGap / 3;
80
+ }
81
+ return 2 * columnsGap / 3;
82
+ }
83
+ function getPaddingAfter(index, { columnsGap, columnsCount }) {
84
+ if (columnsCount === 2) {
85
+ if (index === 0) {
86
+ return columnsGap / 2;
87
+ }
88
+ return 0;
89
+ }
90
+ if (index === 0) {
91
+ return 2 * columnsGap / 3;
92
+ }
93
+ if (index === 1) {
94
+ return columnsGap / 3;
95
+ }
96
+ return 0;
97
+ }
98
+ export {
99
+ ColumnsContainer,
100
+ ColumnsContainerPropsSchema
101
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@csg-org/block-columns-container",
3
- "version": "0.0.4-alpha.3",
3
+ "version": "0.0.4-alpha.4",
4
4
  "description": "@csg-org/document compatible ColumnsContainer component",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",