@kopexa/page-layout 0.0.0-canary-20250720192841

package/README.md

@@ -0,0 +1,24 @@
+# @kopexa/page-layout
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @kopexa/page-layout
+# or
+npm i @kopexa/page-layout
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/kopexa-grc/sight/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/kopexa-grc/sight/blob/master/LICENSE).

package/dist/chunk-F7HJK32J.mjs

@@ -0,0 +1,89 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/page-layout.tsx
+import { createContext } from "@kopexa/react-utils";
+import { dataAttr } from "@kopexa/shared-utils";
+import { pageLayout } from "@kopexa/theme";
+import { Children, isValidElement, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var [Provider, usePageLayoutContext] = createContext(
+  {}
+);
+var PageLayoutRoot = (props) => {
+  const { children, width, spacing, paneWidth, gap, ...rest } = props;
+  const styles = useMemo(
+    () => pageLayout({ width, spacing, paneWidth, gap }),
+    [width, spacing, paneWidth, gap]
+  );
+  const header = [];
+  const footer = [];
+  const content = [];
+  Children.forEach(children, (child) => {
+    if (isValidElement(child)) {
+      const type = getDisplayName(child);
+      if (type === "PageLayoutHeader") {
+        header.push(child);
+      } else if (type === "PageLayoutFooter") {
+        footer.push(child);
+      } else {
+        content.push(child);
+      }
+    } else {
+      content.push(child);
+    }
+  });
+  return /* @__PURE__ */ jsx(Provider, { value: { styles }, children: /* @__PURE__ */ jsx("div", { ...rest, children: /* @__PURE__ */ jsxs("div", { className: styles.wrapper(), children: [
+    header,
+    /* @__PURE__ */ jsx("div", { className: styles.baseContent(), children: content }),
+    footer
+  ] }) }) });
+};
+var PageLayoutHeader = (props) => {
+  const { className, ...rest } = props;
+  const { styles } = usePageLayoutContext();
+  return /* @__PURE__ */ jsx("header", { className: styles.header({ className }), ...rest });
+};
+PageLayoutHeader.displayName = "PageLayoutHeader";
+var PageLayoutFooter = (props) => {
+  const { className, children, ...rest } = props;
+  const { styles } = usePageLayoutContext();
+  return /* @__PURE__ */ jsx("footer", { className: styles.footerWrapper({ className }), ...rest, children: /* @__PURE__ */ jsx("div", { className: styles.footerContent(), children }) });
+};
+PageLayoutFooter.displayName = "PageLayoutFooter";
+function PageLayoutPane(props) {
+  const { className, children, position = "end", sticky, ...rest } = props;
+  const { styles } = usePageLayoutContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: styles.paneWrapper({ className }),
+      "data-position": position,
+      "data-sticky": dataAttr(sticky),
+      ...rest,
+      children: /* @__PURE__ */ jsx("div", { className: styles.pane(), children })
+    }
+  );
+}
+function PageLayoutContent(props) {
+  const { className, children, ...rest } = props;
+  const { styles } = usePageLayoutContext();
+  return /* @__PURE__ */ jsx("div", { className: styles.contentWrapper({ className }), ...rest, children: /* @__PURE__ */ jsx("div", { className: styles.content(), children }) });
+}
+function getDisplayName(el) {
+  var _a, _b, _c;
+  return (_c = (_a = el.type) == null ? void 0 : _a.displayName) != null ? _c : (_b = el.type) == null ? void 0 : _b.name;
+}
+
+export {
+  __export,
+  PageLayoutRoot,
+  PageLayoutHeader,
+  PageLayoutFooter,
+  PageLayoutPane,
+  PageLayoutContent
+};

package/dist/chunk-QHYETCIA.mjs

@@ -0,0 +1,23 @@
+"use client";
+import {
+  PageLayoutContent,
+  PageLayoutFooter,
+  PageLayoutHeader,
+  PageLayoutPane,
+  PageLayoutRoot,
+  __export
+} from "./chunk-F7HJK32J.mjs";
+
+// src/namespace.ts
+var namespace_exports = {};
+__export(namespace_exports, {
+  Content: () => PageLayoutContent,
+  Footer: () => PageLayoutFooter,
+  Header: () => PageLayoutHeader,
+  Pane: () => PageLayoutPane,
+  Root: () => PageLayoutRoot
+});
+
+export {
+  namespace_exports
+};

package/dist/index.d.mts

@@ -0,0 +1,5 @@
+export { n as PageLayout } from './namespace.mjs';
+import './page-layout.mjs';
+import 'react/jsx-runtime';
+import '@kopexa/theme';
+import 'react';

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { n as PageLayout } from './namespace.js';
+import './page-layout.js';
+import 'react/jsx-runtime';
+import '@kopexa/theme';
+import 'react';

package/dist/index.js

@@ -0,0 +1,114 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  PageLayout: () => namespace_exports
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/namespace.ts
+var namespace_exports = {};
+__export(namespace_exports, {
+  Content: () => PageLayoutContent,
+  Footer: () => PageLayoutFooter,
+  Header: () => PageLayoutHeader,
+  Pane: () => PageLayoutPane,
+  Root: () => PageLayoutRoot
+});
+
+// src/page-layout.tsx
+var import_react_utils = require("@kopexa/react-utils");
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_theme = require("@kopexa/theme");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var [Provider, usePageLayoutContext] = (0, import_react_utils.createContext)(
+  {}
+);
+var PageLayoutRoot = (props) => {
+  const { children, width, spacing, paneWidth, gap, ...rest } = props;
+  const styles = (0, import_react.useMemo)(
+    () => (0, import_theme.pageLayout)({ width, spacing, paneWidth, gap }),
+    [width, spacing, paneWidth, gap]
+  );
+  const header = [];
+  const footer = [];
+  const content = [];
+  import_react.Children.forEach(children, (child) => {
+    if ((0, import_react.isValidElement)(child)) {
+      const type = getDisplayName(child);
+      if (type === "PageLayoutHeader") {
+        header.push(child);
+      } else if (type === "PageLayoutFooter") {
+        footer.push(child);
+      } else {
+        content.push(child);
+      }
+    } else {
+      content.push(child);
+    }
+  });
+  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: [
+    header,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.baseContent(), children: content }),
+    footer
+  ] }) }) });
+};
+var PageLayoutHeader = (props) => {
+  const { className, ...rest } = props;
+  const { styles } = usePageLayoutContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", { className: styles.header({ className }), ...rest });
+};
+PageLayoutHeader.displayName = "PageLayoutHeader";
+var PageLayoutFooter = (props) => {
+  const { className, children, ...rest } = props;
+  const { styles } = usePageLayoutContext();
+  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 }) });
+};
+PageLayoutFooter.displayName = "PageLayoutFooter";
+function PageLayoutPane(props) {
+  const { className, children, position = "end", sticky, ...rest } = props;
+  const { styles } = usePageLayoutContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: styles.paneWrapper({ className }),
+      "data-position": position,
+      "data-sticky": (0, import_shared_utils.dataAttr)(sticky),
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.pane(), children })
+    }
+  );
+}
+function PageLayoutContent(props) {
+  const { className, children, ...rest } = props;
+  const { styles } = usePageLayoutContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.contentWrapper({ className }), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.content(), children }) });
+}
+function getDisplayName(el) {
+  var _a, _b, _c;
+  return (_c = (_a = el.type) == null ? void 0 : _a.displayName) != null ? _c : (_b = el.type) == null ? void 0 : _b.name;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PageLayout
+});

package/dist/index.mjs

@@ -0,0 +1,8 @@
+"use client";
+import {
+  namespace_exports
+} from "./chunk-QHYETCIA.mjs";
+import "./chunk-F7HJK32J.mjs";
+export {
+  namespace_exports as PageLayout
+};

package/dist/namespace.d.mts

@@ -0,0 +1,10 @@
+import { PageLayoutContent, PageLayoutContentProps, PageLayoutFooter, PageLayoutFooterProps, PageLayoutHeader, PageLayoutHeaderProps, PageLayoutPane, PageLayoutPaneProps, PageLayoutRoot, PageLayoutRootProps } from './page-layout.mjs';
+import 'react/jsx-runtime';
+import '@kopexa/theme';
+import 'react';
+
+declare namespace namespace {
+  export { PageLayoutContent as Content, PageLayoutContentProps as ContentProps, PageLayoutFooter as Footer, PageLayoutFooterProps as FooterProps, PageLayoutHeader as Header, PageLayoutHeaderProps as HeaderProps, PageLayoutPane as Pane, PageLayoutPaneProps as PaneProps, PageLayoutRoot as Root, PageLayoutRootProps as RootProps };
+}
+
+export { PageLayoutContent as Content, PageLayoutContentProps as ContentProps, PageLayoutFooter as Footer, PageLayoutFooterProps as FooterProps, PageLayoutHeader as Header, PageLayoutHeaderProps as HeaderProps, PageLayoutPane as Pane, PageLayoutPaneProps as PaneProps, PageLayoutRoot as Root, PageLayoutRootProps as RootProps, namespace as n };

package/dist/namespace.d.ts

@@ -0,0 +1,10 @@
+import { PageLayoutContent, PageLayoutContentProps, PageLayoutFooter, PageLayoutFooterProps, PageLayoutHeader, PageLayoutHeaderProps, PageLayoutPane, PageLayoutPaneProps, PageLayoutRoot, PageLayoutRootProps } from './page-layout.js';
+import 'react/jsx-runtime';
+import '@kopexa/theme';
+import 'react';
+
+declare namespace namespace {
+  export { PageLayoutContent as Content, PageLayoutContentProps as ContentProps, PageLayoutFooter as Footer, PageLayoutFooterProps as FooterProps, PageLayoutHeader as Header, PageLayoutHeaderProps as HeaderProps, PageLayoutPane as Pane, PageLayoutPaneProps as PaneProps, PageLayoutRoot as Root, PageLayoutRootProps as RootProps };
+}
+
+export { PageLayoutContent as Content, PageLayoutContentProps as ContentProps, PageLayoutFooter as Footer, PageLayoutFooterProps as FooterProps, PageLayoutHeader as Header, PageLayoutHeaderProps as HeaderProps, PageLayoutPane as Pane, PageLayoutPaneProps as PaneProps, PageLayoutRoot as Root, PageLayoutRootProps as RootProps, namespace as n };

package/dist/namespace.js

@@ -0,0 +1,112 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/namespace.ts
+var namespace_exports = {};
+__export(namespace_exports, {
+  Content: () => PageLayoutContent,
+  Footer: () => PageLayoutFooter,
+  Header: () => PageLayoutHeader,
+  Pane: () => PageLayoutPane,
+  Root: () => PageLayoutRoot
+});
+module.exports = __toCommonJS(namespace_exports);
+
+// src/page-layout.tsx
+var import_react_utils = require("@kopexa/react-utils");
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_theme = require("@kopexa/theme");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var [Provider, usePageLayoutContext] = (0, import_react_utils.createContext)(
+  {}
+);
+var PageLayoutRoot = (props) => {
+  const { children, width, spacing, paneWidth, gap, ...rest } = props;
+  const styles = (0, import_react.useMemo)(
+    () => (0, import_theme.pageLayout)({ width, spacing, paneWidth, gap }),
+    [width, spacing, paneWidth, gap]
+  );
+  const header = [];
+  const footer = [];
+  const content = [];
+  import_react.Children.forEach(children, (child) => {
+    if ((0, import_react.isValidElement)(child)) {
+      const type = getDisplayName(child);
+      if (type === "PageLayoutHeader") {
+        header.push(child);
+      } else if (type === "PageLayoutFooter") {
+        footer.push(child);
+      } else {
+        content.push(child);
+      }
+    } else {
+      content.push(child);
+    }
+  });
+  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: [
+    header,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.baseContent(), children: content }),
+    footer
+  ] }) }) });
+};
+var PageLayoutHeader = (props) => {
+  const { className, ...rest } = props;
+  const { styles } = usePageLayoutContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", { className: styles.header({ className }), ...rest });
+};
+PageLayoutHeader.displayName = "PageLayoutHeader";
+var PageLayoutFooter = (props) => {
+  const { className, children, ...rest } = props;
+  const { styles } = usePageLayoutContext();
+  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 }) });
+};
+PageLayoutFooter.displayName = "PageLayoutFooter";
+function PageLayoutPane(props) {
+  const { className, children, position = "end", sticky, ...rest } = props;
+  const { styles } = usePageLayoutContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: styles.paneWrapper({ className }),
+      "data-position": position,
+      "data-sticky": (0, import_shared_utils.dataAttr)(sticky),
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.pane(), children })
+    }
+  );
+}
+function PageLayoutContent(props) {
+  const { className, children, ...rest } = props;
+  const { styles } = usePageLayoutContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.contentWrapper({ className }), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.content(), children }) });
+}
+function getDisplayName(el) {
+  var _a, _b, _c;
+  return (_c = (_a = el.type) == null ? void 0 : _a.displayName) != null ? _c : (_b = el.type) == null ? void 0 : _b.name;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Content,
+  Footer,
+  Header,
+  Pane,
+  Root
+});

package/dist/namespace.mjs

@@ -0,0 +1,16 @@
+"use client";
+import "./chunk-QHYETCIA.mjs";
+import {
+  PageLayoutContent,
+  PageLayoutFooter,
+  PageLayoutHeader,
+  PageLayoutPane,
+  PageLayoutRoot
+} from "./chunk-F7HJK32J.mjs";
+export {
+  PageLayoutContent as Content,
+  PageLayoutFooter as Footer,
+  PageLayoutHeader as Header,
+  PageLayoutPane as Pane,
+  PageLayoutRoot as Root
+};

package/dist/page-layout.d.mts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PageLayoutVariantProps } from '@kopexa/theme';
+import { ComponentProps } from 'react';
+
+type PageLayoutRootProps = ComponentProps<"div"> & PageLayoutVariantProps;
+declare const PageLayoutRoot: (props: PageLayoutRootProps) => react_jsx_runtime.JSX.Element;
+type PageLayoutHeaderProps = ComponentProps<"header">;
+declare const PageLayoutHeader: {
+    (props: PageLayoutHeaderProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+type PageLayoutFooterProps = ComponentProps<"footer">;
+declare const PageLayoutFooter: {
+    (props: PageLayoutFooterProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+type PageLayoutPaneProps = ComponentProps<"div"> & {
+    /**
+     * Position of the pane within the layout.
+     * - `start`: Pane is positioned at the start of the layout.
+     * - `end`: Pane is positioned at the end of the layout.
+     * @default `end`
+     */
+    position?: "start" | "end";
+    /**
+     * If true, the pane will be sticky at the top of the viewport.
+     * This is useful for keeping the pane visible while scrolling.
+     * @default false
+     */
+    sticky?: boolean;
+};
+declare function PageLayoutPane(props: PageLayoutPaneProps): react_jsx_runtime.JSX.Element;
+type PageLayoutContentProps = ComponentProps<"div">;
+declare function PageLayoutContent(props: PageLayoutContentProps): react_jsx_runtime.JSX.Element;
+
+export { PageLayoutContent, type PageLayoutContentProps, PageLayoutFooter, type PageLayoutFooterProps, PageLayoutHeader, type PageLayoutHeaderProps, PageLayoutPane, type PageLayoutPaneProps, PageLayoutRoot, type PageLayoutRootProps };

package/dist/page-layout.d.ts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PageLayoutVariantProps } from '@kopexa/theme';
+import { ComponentProps } from 'react';
+
+type PageLayoutRootProps = ComponentProps<"div"> & PageLayoutVariantProps;
+declare const PageLayoutRoot: (props: PageLayoutRootProps) => react_jsx_runtime.JSX.Element;
+type PageLayoutHeaderProps = ComponentProps<"header">;
+declare const PageLayoutHeader: {
+    (props: PageLayoutHeaderProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+type PageLayoutFooterProps = ComponentProps<"footer">;
+declare const PageLayoutFooter: {
+    (props: PageLayoutFooterProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+type PageLayoutPaneProps = ComponentProps<"div"> & {
+    /**
+     * Position of the pane within the layout.
+     * - `start`: Pane is positioned at the start of the layout.
+     * - `end`: Pane is positioned at the end of the layout.
+     * @default `end`
+     */
+    position?: "start" | "end";
+    /**
+     * If true, the pane will be sticky at the top of the viewport.
+     * This is useful for keeping the pane visible while scrolling.
+     * @default false
+     */
+    sticky?: boolean;
+};
+declare function PageLayoutPane(props: PageLayoutPaneProps): react_jsx_runtime.JSX.Element;
+type PageLayoutContentProps = ComponentProps<"div">;
+declare function PageLayoutContent(props: PageLayoutContentProps): react_jsx_runtime.JSX.Element;
+
+export { PageLayoutContent, type PageLayoutContentProps, PageLayoutFooter, type PageLayoutFooterProps, PageLayoutHeader, type PageLayoutHeaderProps, PageLayoutPane, type PageLayoutPaneProps, PageLayoutRoot, type PageLayoutRootProps };

package/dist/page-layout.js

@@ -0,0 +1,110 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/page-layout.tsx
+var page_layout_exports = {};
+__export(page_layout_exports, {
+  PageLayoutContent: () => PageLayoutContent,
+  PageLayoutFooter: () => PageLayoutFooter,
+  PageLayoutHeader: () => PageLayoutHeader,
+  PageLayoutPane: () => PageLayoutPane,
+  PageLayoutRoot: () => PageLayoutRoot
+});
+module.exports = __toCommonJS(page_layout_exports);
+var import_react_utils = require("@kopexa/react-utils");
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_theme = require("@kopexa/theme");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var [Provider, usePageLayoutContext] = (0, import_react_utils.createContext)(
+  {}
+);
+var PageLayoutRoot = (props) => {
+  const { children, width, spacing, paneWidth, gap, ...rest } = props;
+  const styles = (0, import_react.useMemo)(
+    () => (0, import_theme.pageLayout)({ width, spacing, paneWidth, gap }),
+    [width, spacing, paneWidth, gap]
+  );
+  const header = [];
+  const footer = [];
+  const content = [];
+  import_react.Children.forEach(children, (child) => {
+    if ((0, import_react.isValidElement)(child)) {
+      const type = getDisplayName(child);
+      if (type === "PageLayoutHeader") {
+        header.push(child);
+      } else if (type === "PageLayoutFooter") {
+        footer.push(child);
+      } else {
+        content.push(child);
+      }
+    } else {
+      content.push(child);
+    }
+  });
+  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: [
+    header,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.baseContent(), children: content }),
+    footer
+  ] }) }) });
+};
+var PageLayoutHeader = (props) => {
+  const { className, ...rest } = props;
+  const { styles } = usePageLayoutContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", { className: styles.header({ className }), ...rest });
+};
+PageLayoutHeader.displayName = "PageLayoutHeader";
+var PageLayoutFooter = (props) => {
+  const { className, children, ...rest } = props;
+  const { styles } = usePageLayoutContext();
+  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 }) });
+};
+PageLayoutFooter.displayName = "PageLayoutFooter";
+function PageLayoutPane(props) {
+  const { className, children, position = "end", sticky, ...rest } = props;
+  const { styles } = usePageLayoutContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: styles.paneWrapper({ className }),
+      "data-position": position,
+      "data-sticky": (0, import_shared_utils.dataAttr)(sticky),
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.pane(), children })
+    }
+  );
+}
+function PageLayoutContent(props) {
+  const { className, children, ...rest } = props;
+  const { styles } = usePageLayoutContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.contentWrapper({ className }), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.content(), children }) });
+}
+function getDisplayName(el) {
+  var _a, _b, _c;
+  return (_c = (_a = el.type) == null ? void 0 : _a.displayName) != null ? _c : (_b = el.type) == null ? void 0 : _b.name;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PageLayoutContent,
+  PageLayoutFooter,
+  PageLayoutHeader,
+  PageLayoutPane,
+  PageLayoutRoot
+});

package/dist/page-layout.mjs

@@ -0,0 +1,15 @@
+"use client";
+import {
+  PageLayoutContent,
+  PageLayoutFooter,
+  PageLayoutHeader,
+  PageLayoutPane,
+  PageLayoutRoot
+} from "./chunk-F7HJK32J.mjs";
+export {
+  PageLayoutContent,
+  PageLayoutFooter,
+  PageLayoutHeader,
+  PageLayoutPane,
+  PageLayoutRoot
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@kopexa/page-layout",
+  "version": "0.0.0-canary-20250720192841",
+  "description": "The layout for our pages used within kopexa",
+  "keywords": [
+    "page-layout"
+  ],
+  "author": "Kopexa <hello@kopexa.com>",
+  "homepage": "https://kopexa.com",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kopexa-grc/sight.git",
+    "directory": "packages/components/page-layout"
+  },
+  "bugs": {
+    "url": "https://github.com/kopexa-grc/sight/issues"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0-rc.0",
+    "react-dom": ">=19.0.0-rc.0",
+    "motion": ">=12.23.6",
+    "@kopexa/theme": "0.0.0-canary-20250720192841"
+  },
+  "dependencies": {
+    "@kopexa/shared-utils": "1.1.1",
+    "@kopexa/react-utils": "2.0.1"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit"
+  }
+}