@kopexa/page-layout 3.0.6 → 3.0.8

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 (12) hide show
  1. package/dist/chunk-KSN7622N.mjs +185 -0
  2. package/dist/{chunk-OCDAFVW3.mjs → chunk-ZMZKGNM7.mjs} +1 -1
  3. package/dist/index.js +95 -16
  4. package/dist/index.mjs +2 -2
  5. package/dist/namespace.js +95 -16
  6. package/dist/namespace.mjs +2 -2
  7. package/dist/page-layout.d.mts +4 -2
  8. package/dist/page-layout.d.ts +4 -2
  9. package/dist/page-layout.js +95 -16
  10. package/dist/page-layout.mjs +1 -1
  11. package/package.json +2 -2
  12. package/dist/chunk-FQT7SY6U.mjs +0 -104
package/dist/chunk-KSN7622N.mjs ADDED
@@ -0,0 +1,185 @@
1
+ "use client";
2
+ var __defProp = Object.defineProperty;
3
+ var __export = (target, all) => {
4
+ for (var name in all)
5
+ __defProp(target, name, { get: all[name], enumerable: true });
6
+ };
7
+
8
+ // src/page-layout.tsx
9
+ import { createContext } from "@kopexa/react-utils";
10
+ import { cn, dataAttr } from "@kopexa/shared-utils";
11
+ import {
12
+ pageLayout
13
+ } from "@kopexa/theme";
14
+ import { Children, isValidElement, useMemo } from "react";
15
+ import { jsx, jsxs } from "react/jsx-runtime";
16
+ var [Provider, usePageLayoutContext] = createContext(
17
+ {}
18
+ );
19
+ var PageLayoutRoot = (props) => {
20
+ const {
21
+ children,
22
+ width,
23
+ spacing,
24
+ paneWidth,
25
+ gap,
26
+ className,
27
+ classNames,
28
+ ...rest
29
+ } = props;
30
+ const styles = useMemo(
31
+ () => pageLayout({ width, spacing, paneWidth, gap }),
32
+ [width, spacing, paneWidth, gap]
33
+ );
34
+ const header = [];
35
+ const footer = [];
36
+ const content = [];
37
+ Children.forEach(children, (child) => {
38
+ if (isValidElement(child)) {
39
+ const type = getDisplayName(child);
40
+ if (type === "PageLayoutHeader") {
41
+ header.push(child);
42
+ } else if (type === "PageLayoutFooter") {
43
+ footer.push(child);
44
+ } else {
45
+ content.push(child);
46
+ }
47
+ } else {
48
+ content.push(child);
49
+ }
50
+ });
51
+ return /* @__PURE__ */ jsx(Provider, { value: { styles, classNames }, children: /* @__PURE__ */ jsxs(
52
+ "div",
53
+ {
54
+ className: styles.wrapper({
55
+ className: cn(className, classNames == null ? void 0 : classNames.wrapper),
56
+ spacing,
57
+ gap
58
+ }),
59
+ ...rest,
60
+ children: [
61
+ header,
62
+ /* @__PURE__ */ jsx(
63
+ "div",
64
+ {
65
+ className: styles.baseContent({
66
+ className: classNames == null ? void 0 : classNames.baseContent
67
+ }),
68
+ children: content
69
+ }
70
+ ),
71
+ footer
72
+ ]
73
+ }
74
+ ) });
75
+ };
76
+ var PageLayoutHeader = (props) => {
77
+ const { className, spacing, gap, ...rest } = props;
78
+ const { styles, classNames } = usePageLayoutContext();
79
+ return /* @__PURE__ */ jsx(
80
+ "header",
81
+ {
82
+ className: styles.header({
83
+ className: cn(className, classNames == null ? void 0 : classNames.header),
84
+ spacing,
85
+ gap
86
+ }),
87
+ ...rest
88
+ }
89
+ );
90
+ };
91
+ PageLayoutHeader.displayName = "PageLayoutHeader";
92
+ var PageLayoutFooter = (props) => {
93
+ const { className, children, ...rest } = props;
94
+ const { styles, classNames } = usePageLayoutContext();
95
+ return /* @__PURE__ */ jsx(
96
+ "footer",
97
+ {
98
+ className: styles.footerWrapper({
99
+ className: cn(className, classNames == null ? void 0 : classNames.footerWrapper)
100
+ }),
101
+ ...rest,
102
+ children: /* @__PURE__ */ jsx(
103
+ "div",
104
+ {
105
+ className: styles.footerContent({
106
+ className: classNames == null ? void 0 : classNames.footerContent
107
+ }),
108
+ children
109
+ }
110
+ )
111
+ }
112
+ );
113
+ };
114
+ PageLayoutFooter.displayName = "PageLayoutFooter";
115
+ function PageLayoutPane(props) {
116
+ const {
117
+ className,
118
+ children,
119
+ position = "end",
120
+ sticky,
121
+ spacing,
122
+ gap,
123
+ ...rest
124
+ } = props;
125
+ const { styles, classNames } = usePageLayoutContext();
126
+ return /* @__PURE__ */ jsx(
127
+ "div",
128
+ {
129
+ className: styles.paneWrapper({
130
+ className: cn(className, classNames == null ? void 0 : classNames.paneWrapper),
131
+ spacing,
132
+ gap
133
+ }),
134
+ "data-position": position,
135
+ "data-sticky": dataAttr(sticky),
136
+ ...rest,
137
+ children: /* @__PURE__ */ jsx(
138
+ "div",
139
+ {
140
+ className: styles.pane({ spacing, gap, className: classNames == null ? void 0 : classNames.pane }),
141
+ children
142
+ }
143
+ )
144
+ }
145
+ );
146
+ }
147
+ function PageLayoutContent(props) {
148
+ const { className, children, spacing, gap, ...rest } = props;
149
+ const { styles, classNames } = usePageLayoutContext();
150
+ return /* @__PURE__ */ jsx(
151
+ "div",
152
+ {
153
+ className: styles.contentWrapper({
154
+ className: cn(className, classNames == null ? void 0 : classNames.contentWrapper),
155
+ spacing,
156
+ gap
157
+ }),
158
+ ...rest,
159
+ children: /* @__PURE__ */ jsx(
160
+ "div",
161
+ {
162
+ className: styles.content({
163
+ spacing,
164
+ gap,
165
+ className: classNames == null ? void 0 : classNames.content
166
+ }),
167
+ children
168
+ }
169
+ )
170
+ }
171
+ );
172
+ }
173
+ function getDisplayName(el) {
174
+ var _a, _b, _c;
175
+ return (_c = (_a = el.type) == null ? void 0 : _a.displayName) != null ? _c : (_b = el.type) == null ? void 0 : _b.name;
176
+ }
177
+
178
+ export {
179
+ __export,
180
+ PageLayoutRoot,
181
+ PageLayoutHeader,
182
+ PageLayoutFooter,
183
+ PageLayoutPane,
184
+ PageLayoutContent
185
+ };
package/dist/{chunk-OCDAFVW3.mjs → chunk-ZMZKGNM7.mjs} RENAMED
@@ -6,7 +6,7 @@ import {
6
6
  PageLayoutPane,
7
7
  PageLayoutRoot,
8
8
  __export
9
- } from "./chunk-FQT7SY6U.mjs";
9
+ } from "./chunk-KSN7622N.mjs";
10
10
 
11
11
  // src/namespace.ts
12
12
  var namespace_exports = {};
package/dist/index.js CHANGED
@@ -45,7 +45,16 @@ var [Provider, usePageLayoutContext] = (0, import_react_utils.createContext)(
45
45
  {}
46
46
  );
47
47
  var PageLayoutRoot = (props) => {
48
- const { children, width, spacing, paneWidth, gap, ...rest } = props;
48
+ const {
49
+ children,
50
+ width,
51
+ spacing,
52
+ paneWidth,
53
+ gap,
54
+ className,
55
+ classNames,
56
+ ...rest
57
+ } = props;
49
58
  const styles = (0, import_react.useMemo)(
50
59
  () => (0, import_theme.pageLayout)({ width, spacing, paneWidth, gap }),
51
60
  [width, spacing, paneWidth, gap]
@@ -67,22 +76,68 @@ var PageLayoutRoot = (props) => {
67
76
  content.push(child);
68
77
  }
69
78
  });
70
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.wrapper(), children: [
71
- header,
72
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.baseContent(), children: content }),
73
- footer
74
- ] }) }) });
79
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: { styles, classNames }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
80
+ "div",
81
+ {
82
+ className: styles.wrapper({
83
+ className: (0, import_shared_utils.cn)(className, classNames == null ? void 0 : classNames.wrapper),
84
+ spacing,
85
+ gap
86
+ }),
87
+ ...rest,
88
+ children: [
89
+ header,
90
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
91
+ "div",
92
+ {
93
+ className: styles.baseContent({
94
+ className: classNames == null ? void 0 : classNames.baseContent
95
+ }),
96
+ children: content
97
+ }
98
+ ),
99
+ footer
100
+ ]
101
+ }
102
+ ) });
75
103
  };
76
104
  var PageLayoutHeader = (props) => {
77
105
  const { className, spacing, gap, ...rest } = props;
78
- const { styles } = usePageLayoutContext();
79
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", { className: styles.header({ className, spacing, gap }), ...rest });
106
+ const { styles, classNames } = usePageLayoutContext();
107
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
108
+ "header",
109
+ {
110
+ className: styles.header({
111
+ className: (0, import_shared_utils.cn)(className, classNames == null ? void 0 : classNames.header),
112
+ spacing,
113
+ gap
114
+ }),
115
+ ...rest
116
+ }
117
+ );
80
118
  };
81
119
  PageLayoutHeader.displayName = "PageLayoutHeader";
82
120
  var PageLayoutFooter = (props) => {
83
121
  const { className, children, ...rest } = props;
84
- const { styles } = usePageLayoutContext();
85
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("footer", { className: styles.footerWrapper({ className }), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.footerContent(), children }) });
122
+ const { styles, classNames } = usePageLayoutContext();
123
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
124
+ "footer",
125
+ {
126
+ className: styles.footerWrapper({
127
+ className: (0, import_shared_utils.cn)(className, classNames == null ? void 0 : classNames.footerWrapper)
128
+ }),
129
+ ...rest,
130
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
131
+ "div",
132
+ {
133
+ className: styles.footerContent({
134
+ className: classNames == null ? void 0 : classNames.footerContent
135
+ }),
136
+ children
137
+ }
138
+ )
139
+ }
140
+ );
86
141
  };
87
142
  PageLayoutFooter.displayName = "PageLayoutFooter";
88
143
  function PageLayoutPane(props) {
@@ -95,27 +150,51 @@ function PageLayoutPane(props) {
95
150
  gap,
96
151
  ...rest
97
152
  } = props;
98
- const { styles } = usePageLayoutContext();
153
+ const { styles, classNames } = usePageLayoutContext();
99
154
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
100
155
  "div",
101
156
  {
102
- className: styles.paneWrapper({ className, spacing, gap }),
157
+ className: styles.paneWrapper({
158
+ className: (0, import_shared_utils.cn)(className, classNames == null ? void 0 : classNames.paneWrapper),
159
+ spacing,
160
+ gap
161
+ }),
103
162
  "data-position": position,
104
163
  "data-sticky": (0, import_shared_utils.dataAttr)(sticky),
105
164
  ...rest,
106
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.pane(), children })
165
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
166
+ "div",
167
+ {
168
+ className: styles.pane({ spacing, gap, className: classNames == null ? void 0 : classNames.pane }),
169
+ children
170
+ }
171
+ )
107
172
  }
108
173
  );
109
174
  }
110
175
  function PageLayoutContent(props) {
111
176
  const { className, children, spacing, gap, ...rest } = props;
112
- const { styles } = usePageLayoutContext();
177
+ const { styles, classNames } = usePageLayoutContext();
113
178
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
114
179
  "div",
115
180
  {
116
- className: styles.contentWrapper({ className, spacing, gap }),
181
+ className: styles.contentWrapper({
182
+ className: (0, import_shared_utils.cn)(className, classNames == null ? void 0 : classNames.contentWrapper),
183
+ spacing,
184
+ gap
185
+ }),
117
186
  ...rest,
118
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.content(), children })
187
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
188
+ "div",
189
+ {
190
+ className: styles.content({
191
+ spacing,
192
+ gap,
193
+ className: classNames == null ? void 0 : classNames.content
194
+ }),
195
+ children
196
+ }
197
+ )
119
198
  }
120
199
  );
121
200
  }
package/dist/index.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  "use client";
2
2
  import {
3
3
  namespace_exports
4
- } from "./chunk-OCDAFVW3.mjs";
5
- import "./chunk-FQT7SY6U.mjs";
4
+ } from "./chunk-ZMZKGNM7.mjs";
5
+ import "./chunk-KSN7622N.mjs";
6
6
  export {
7
7
  namespace_exports as PageLayout
8
8
  };
package/dist/namespace.js CHANGED
@@ -39,7 +39,16 @@ var [Provider, usePageLayoutContext] = (0, import_react_utils.createContext)(
39
39
  {}
40
40
  );
41
41
  var PageLayoutRoot = (props) => {
42
- const { children, width, spacing, paneWidth, gap, ...rest } = props;
42
+ const {
43
+ children,
44
+ width,
45
+ spacing,
46
+ paneWidth,
47
+ gap,
48
+ className,
49
+ classNames,
50
+ ...rest
51
+ } = props;
43
52
  const styles = (0, import_react.useMemo)(
44
53
  () => (0, import_theme.pageLayout)({ width, spacing, paneWidth, gap }),
45
54
  [width, spacing, paneWidth, gap]
@@ -61,22 +70,68 @@ var PageLayoutRoot = (props) => {
61
70
  content.push(child);
62
71
  }
63
72
  });
64
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.wrapper(), children: [
65
- header,
66
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.baseContent(), children: content }),
67
- footer
68
- ] }) }) });
73
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: { styles, classNames }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
74
+ "div",
75
+ {
76
+ className: styles.wrapper({
77
+ className: (0, import_shared_utils.cn)(className, classNames == null ? void 0 : classNames.wrapper),
78
+ spacing,
79
+ gap
80
+ }),
81
+ ...rest,
82
+ children: [
83
+ header,
84
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
85
+ "div",
86
+ {
87
+ className: styles.baseContent({
88
+ className: classNames == null ? void 0 : classNames.baseContent
89
+ }),
90
+ children: content
91
+ }
92
+ ),
93
+ footer
94
+ ]
95
+ }
96
+ ) });
69
97
  };
70
98
  var PageLayoutHeader = (props) => {
71
99
  const { className, spacing, gap, ...rest } = props;
72
- const { styles } = usePageLayoutContext();
73
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", { className: styles.header({ className, spacing, gap }), ...rest });
100
+ const { styles, classNames } = usePageLayoutContext();
101
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
102
+ "header",
103
+ {
104
+ className: styles.header({
105
+ className: (0, import_shared_utils.cn)(className, classNames == null ? void 0 : classNames.header),
106
+ spacing,
107
+ gap
108
+ }),
109
+ ...rest
110
+ }
111
+ );
74
112
  };
75
113
  PageLayoutHeader.displayName = "PageLayoutHeader";
76
114
  var PageLayoutFooter = (props) => {
77
115
  const { className, children, ...rest } = props;
78
- const { styles } = usePageLayoutContext();
79
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("footer", { className: styles.footerWrapper({ className }), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.footerContent(), children }) });
116
+ const { styles, classNames } = usePageLayoutContext();
117
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
118
+ "footer",
119
+ {
120
+ className: styles.footerWrapper({
121
+ className: (0, import_shared_utils.cn)(className, classNames == null ? void 0 : classNames.footerWrapper)
122
+ }),
123
+ ...rest,
124
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
125
+ "div",
126
+ {
127
+ className: styles.footerContent({
128
+ className: classNames == null ? void 0 : classNames.footerContent
129
+ }),
130
+ children
131
+ }
132
+ )
133
+ }
134
+ );
80
135
  };
81
136
  PageLayoutFooter.displayName = "PageLayoutFooter";
82
137
  function PageLayoutPane(props) {
@@ -89,27 +144,51 @@ function PageLayoutPane(props) {
89
144
  gap,
90
145
  ...rest
91
146
  } = props;
92
- const { styles } = usePageLayoutContext();
147
+ const { styles, classNames } = usePageLayoutContext();
93
148
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
94
149
  "div",
95
150
  {
96
- className: styles.paneWrapper({ className, spacing, gap }),
151
+ className: styles.paneWrapper({
152
+ className: (0, import_shared_utils.cn)(className, classNames == null ? void 0 : classNames.paneWrapper),
153
+ spacing,
154
+ gap
155
+ }),
97
156
  "data-position": position,
98
157
  "data-sticky": (0, import_shared_utils.dataAttr)(sticky),
99
158
  ...rest,
100
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.pane(), children })
159
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
160
+ "div",
161
+ {
162
+ className: styles.pane({ spacing, gap, className: classNames == null ? void 0 : classNames.pane }),
163
+ children
164
+ }
165
+ )
101
166
  }
102
167
  );
103
168
  }
104
169
  function PageLayoutContent(props) {
105
170
  const { className, children, spacing, gap, ...rest } = props;
106
- const { styles } = usePageLayoutContext();
171
+ const { styles, classNames } = usePageLayoutContext();
107
172
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
108
173
  "div",
109
174
  {
110
- className: styles.contentWrapper({ className, spacing, gap }),
175
+ className: styles.contentWrapper({
176
+ className: (0, import_shared_utils.cn)(className, classNames == null ? void 0 : classNames.contentWrapper),
177
+ spacing,
178
+ gap
179
+ }),
111
180
  ...rest,
112
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.content(), children })
181
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
182
+ "div",
183
+ {
184
+ className: styles.content({
185
+ spacing,
186
+ gap,
187
+ className: classNames == null ? void 0 : classNames.content
188
+ }),
189
+ children
190
+ }
191
+ )
113
192
  }
114
193
  );
115
194
  }
package/dist/namespace.mjs CHANGED
@@ -1,12 +1,12 @@
1
1
  "use client";
2
- import "./chunk-OCDAFVW3.mjs";
2
+ import "./chunk-ZMZKGNM7.mjs";
3
3
  import {
4
4
  PageLayoutContent,
5
5
  PageLayoutFooter,
6
6
  PageLayoutHeader,
7
7
  PageLayoutPane,
8
8
  PageLayoutRoot
9
- } from "./chunk-FQT7SY6U.mjs";
9
+ } from "./chunk-KSN7622N.mjs";
10
10
  export {
11
11
  PageLayoutContent as Content,
12
12
  PageLayoutFooter as Footer,
package/dist/page-layout.d.mts CHANGED
@@ -1,8 +1,10 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { PageLayoutVariantProps } from '@kopexa/theme';
2
+ import { PageLayoutVariantProps, SlotsToClasses, PageLayoutSlots } from '@kopexa/theme';
3
3
  import { ComponentProps } from 'react';
4
4
 
5
- type PageLayoutRootProps = ComponentProps<"div"> & PageLayoutVariantProps;
5
+ type PageLayoutRootProps = ComponentProps<"div"> & PageLayoutVariantProps & {
6
+ classNames?: SlotsToClasses<PageLayoutSlots>;
7
+ };
6
8
  declare const PageLayoutRoot: (props: PageLayoutRootProps) => react_jsx_runtime.JSX.Element;
7
9
  type PageLayoutHeaderProps = ComponentProps<"header"> & {
8
10
  spacing?: PageLayoutVariantProps["spacing"];
package/dist/page-layout.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { PageLayoutVariantProps } from '@kopexa/theme';
2
+ import { PageLayoutVariantProps, SlotsToClasses, PageLayoutSlots } from '@kopexa/theme';
3
3
  import { ComponentProps } from 'react';
4
4
 
5
- type PageLayoutRootProps = ComponentProps<"div"> & PageLayoutVariantProps;
5
+ type PageLayoutRootProps = ComponentProps<"div"> & PageLayoutVariantProps & {
6
+ classNames?: SlotsToClasses<PageLayoutSlots>;
7
+ };
6
8
  declare const PageLayoutRoot: (props: PageLayoutRootProps) => react_jsx_runtime.JSX.Element;
7
9
  type PageLayoutHeaderProps = ComponentProps<"header"> & {
8
10
  spacing?: PageLayoutVariantProps["spacing"];
package/dist/page-layout.js CHANGED
@@ -37,7 +37,16 @@ var [Provider, usePageLayoutContext] = (0, import_react_utils.createContext)(
37
37
  {}
38
38
  );
39
39
  var PageLayoutRoot = (props) => {
40
- const { children, width, spacing, paneWidth, gap, ...rest } = props;
40
+ const {
41
+ children,
42
+ width,
43
+ spacing,
44
+ paneWidth,
45
+ gap,
46
+ className,
47
+ classNames,
48
+ ...rest
49
+ } = props;
41
50
  const styles = (0, import_react.useMemo)(
42
51
  () => (0, import_theme.pageLayout)({ width, spacing, paneWidth, gap }),
43
52
  [width, spacing, paneWidth, gap]
@@ -59,22 +68,68 @@ var PageLayoutRoot = (props) => {
59
68
  content.push(child);
60
69
  }
61
70
  });
62
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.wrapper(), children: [
63
- header,
64
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.baseContent(), children: content }),
65
- footer
66
- ] }) }) });
71
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: { styles, classNames }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
72
+ "div",
73
+ {
74
+ className: styles.wrapper({
75
+ className: (0, import_shared_utils.cn)(className, classNames == null ? void 0 : classNames.wrapper),
76
+ spacing,
77
+ gap
78
+ }),
79
+ ...rest,
80
+ children: [
81
+ header,
82
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
83
+ "div",
84
+ {
85
+ className: styles.baseContent({
86
+ className: classNames == null ? void 0 : classNames.baseContent
87
+ }),
88
+ children: content
89
+ }
90
+ ),
91
+ footer
92
+ ]
93
+ }
94
+ ) });
67
95
  };
68
96
  var PageLayoutHeader = (props) => {
69
97
  const { className, spacing, gap, ...rest } = props;
70
- const { styles } = usePageLayoutContext();
71
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", { className: styles.header({ className, spacing, gap }), ...rest });
98
+ const { styles, classNames } = usePageLayoutContext();
99
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
100
+ "header",
101
+ {
102
+ className: styles.header({
103
+ className: (0, import_shared_utils.cn)(className, classNames == null ? void 0 : classNames.header),
104
+ spacing,
105
+ gap
106
+ }),
107
+ ...rest
108
+ }
109
+ );
72
110
  };
73
111
  PageLayoutHeader.displayName = "PageLayoutHeader";
74
112
  var PageLayoutFooter = (props) => {
75
113
  const { className, children, ...rest } = props;
76
- const { styles } = usePageLayoutContext();
77
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("footer", { className: styles.footerWrapper({ className }), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.footerContent(), children }) });
114
+ const { styles, classNames } = usePageLayoutContext();
115
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
116
+ "footer",
117
+ {
118
+ className: styles.footerWrapper({
119
+ className: (0, import_shared_utils.cn)(className, classNames == null ? void 0 : classNames.footerWrapper)
120
+ }),
121
+ ...rest,
122
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
123
+ "div",
124
+ {
125
+ className: styles.footerContent({
126
+ className: classNames == null ? void 0 : classNames.footerContent
127
+ }),
128
+ children
129
+ }
130
+ )
131
+ }
132
+ );
78
133
  };
79
134
  PageLayoutFooter.displayName = "PageLayoutFooter";
80
135
  function PageLayoutPane(props) {
@@ -87,27 +142,51 @@ function PageLayoutPane(props) {
87
142
  gap,
88
143
  ...rest
89
144
  } = props;
90
- const { styles } = usePageLayoutContext();
145
+ const { styles, classNames } = usePageLayoutContext();
91
146
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
92
147
  "div",
93
148
  {
94
- className: styles.paneWrapper({ className, spacing, gap }),
149
+ className: styles.paneWrapper({
150
+ className: (0, import_shared_utils.cn)(className, classNames == null ? void 0 : classNames.paneWrapper),
151
+ spacing,
152
+ gap
153
+ }),
95
154
  "data-position": position,
96
155
  "data-sticky": (0, import_shared_utils.dataAttr)(sticky),
97
156
  ...rest,
98
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.pane(), children })
157
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
158
+ "div",
159
+ {
160
+ className: styles.pane({ spacing, gap, className: classNames == null ? void 0 : classNames.pane }),
161
+ children
162
+ }
163
+ )
99
164
  }
100
165
  );
101
166
  }
102
167
  function PageLayoutContent(props) {
103
168
  const { className, children, spacing, gap, ...rest } = props;
104
- const { styles } = usePageLayoutContext();
169
+ const { styles, classNames } = usePageLayoutContext();
105
170
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
106
171
  "div",
107
172
  {
108
- className: styles.contentWrapper({ className, spacing, gap }),
173
+ className: styles.contentWrapper({
174
+ className: (0, import_shared_utils.cn)(className, classNames == null ? void 0 : classNames.contentWrapper),
175
+ spacing,
176
+ gap
177
+ }),
109
178
  ...rest,
110
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.content(), children })
179
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
180
+ "div",
181
+ {
182
+ className: styles.content({
183
+ spacing,
184
+ gap,
185
+ className: classNames == null ? void 0 : classNames.content
186
+ }),
187
+ children
188
+ }
189
+ )
111
190
  }
112
191
  );
113
192
  }
package/dist/page-layout.mjs CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  PageLayoutHeader,
6
6
  PageLayoutPane,
7
7
  PageLayoutRoot
8
- } from "./chunk-FQT7SY6U.mjs";
8
+ } from "./chunk-KSN7622N.mjs";
9
9
  export {
10
10
  PageLayoutContent,
11
11
  PageLayoutFooter,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kopexa/page-layout",
3
- "version": "3.0.6",
3
+ "version": "3.0.8",
4
4
  "description": "The layout for our pages used within kopexa",
5
5
  "keywords": [
6
6
  "page-layout"
@@ -28,7 +28,7 @@
28
28
  "react": ">=19.0.0-rc.0",
29
29
  "react-dom": ">=19.0.0-rc.0",
30
30
  "motion": ">=12.23.6",
31
- "@kopexa/theme": "1.5.5"
31
+ "@kopexa/theme": "1.5.6"
32
32
  },
33
33
  "dependencies": {
34
34
  "@kopexa/shared-utils": "1.1.5",
package/dist/chunk-FQT7SY6U.mjs DELETED
@@ -1,104 +0,0 @@
1
- "use client";
2
- var __defProp = Object.defineProperty;
3
- var __export = (target, all) => {
4
- for (var name in all)
5
- __defProp(target, name, { get: all[name], enumerable: true });
6
- };
7
-
8
- // src/page-layout.tsx
9
- import { createContext } from "@kopexa/react-utils";
10
- import { dataAttr } from "@kopexa/shared-utils";
11
- import { pageLayout } from "@kopexa/theme";
12
- import { Children, isValidElement, useMemo } from "react";
13
- import { jsx, jsxs } from "react/jsx-runtime";
14
- var [Provider, usePageLayoutContext] = createContext(
15
- {}
16
- );
17
- var PageLayoutRoot = (props) => {
18
- const { children, width, spacing, paneWidth, gap, ...rest } = props;
19
- const styles = useMemo(
20
- () => pageLayout({ width, spacing, paneWidth, gap }),
21
- [width, spacing, paneWidth, gap]
22
- );
23
- const header = [];
24
- const footer = [];
25
- const content = [];
26
- Children.forEach(children, (child) => {
27
- if (isValidElement(child)) {
28
- const type = getDisplayName(child);
29
- if (type === "PageLayoutHeader") {
30
- header.push(child);
31
- } else if (type === "PageLayoutFooter") {
32
- footer.push(child);
33
- } else {
34
- content.push(child);
35
- }
36
- } else {
37
- content.push(child);
38
- }
39
- });
40
- return /* @__PURE__ */ jsx(Provider, { value: { styles }, children: /* @__PURE__ */ jsx("div", { ...rest, children: /* @__PURE__ */ jsxs("div", { className: styles.wrapper(), children: [
41
- header,
42
- /* @__PURE__ */ jsx("div", { className: styles.baseContent(), children: content }),
43
- footer
44
- ] }) }) });
45
- };
46
- var PageLayoutHeader = (props) => {
47
- const { className, spacing, gap, ...rest } = props;
48
- const { styles } = usePageLayoutContext();
49
- return /* @__PURE__ */ jsx("header", { className: styles.header({ className, spacing, gap }), ...rest });
50
- };
51
- PageLayoutHeader.displayName = "PageLayoutHeader";
52
- var PageLayoutFooter = (props) => {
53
- const { className, children, ...rest } = props;
54
- const { styles } = usePageLayoutContext();
55
- return /* @__PURE__ */ jsx("footer", { className: styles.footerWrapper({ className }), ...rest, children: /* @__PURE__ */ jsx("div", { className: styles.footerContent(), children }) });
56
- };
57
- PageLayoutFooter.displayName = "PageLayoutFooter";
58
- function PageLayoutPane(props) {
59
- const {
60
- className,
61
- children,
62
- position = "end",
63
- sticky,
64
- spacing,
65
- gap,
66
- ...rest
67
- } = props;
68
- const { styles } = usePageLayoutContext();
69
- return /* @__PURE__ */ jsx(
70
- "div",
71
- {
72
- className: styles.paneWrapper({ className, spacing, gap }),
73
- "data-position": position,
74
- "data-sticky": dataAttr(sticky),
75
- ...rest,
76
- children: /* @__PURE__ */ jsx("div", { className: styles.pane(), children })
77
- }
78
- );
79
- }
80
- function PageLayoutContent(props) {
81
- const { className, children, spacing, gap, ...rest } = props;
82
- const { styles } = usePageLayoutContext();
83
- return /* @__PURE__ */ jsx(
84
- "div",
85
- {
86
- className: styles.contentWrapper({ className, spacing, gap }),
87
- ...rest,
88
- children: /* @__PURE__ */ jsx("div", { className: styles.content(), children })
89
- }
90
- );
91
- }
92
- function getDisplayName(el) {
93
- var _a, _b, _c;
94
- return (_c = (_a = el.type) == null ? void 0 : _a.displayName) != null ? _c : (_b = el.type) == null ? void 0 : _b.name;
95
- }
96
-
97
- export {
98
- __export,
99
- PageLayoutRoot,
100
- PageLayoutHeader,
101
- PageLayoutFooter,
102
- PageLayoutPane,
103
- PageLayoutContent
104
- };