@kopexa/page-layout 3.0.7 → 3.0.9

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