@damarkuncoro/layout-engine-react 0.1.0 → 0.1.1

package/README.md

@@ -10,11 +10,25 @@ npm install @damarkuncoro/layout-engine-react
 
 Pastikan `react` dan `react-dom` tersedia.
 
+## Import ESM & CJS
+
+- ESM (direkomendasikan):
+
+```js
+import { Box, Stack, SidebarLayout } from "@damarkuncoro/layout-engine-react"
+```
+
+- CJS:
+
+```js
+const { Box, Stack, SidebarLayout } = require("@damarkuncoro/layout-engine-react")
+```
+
 ## Penggunaan
 
 ```jsx
 import React from "react"
-import { SidebarLayout, Stack, Box } from "layout-engine-react"
+import { SidebarLayout, Stack, Box } from "@damarkuncoro/layout-engine-react"
 
 export default function App() {
   const sidebar = Box({ children: "Sidebar" })
@@ -31,6 +45,7 @@ export default function App() {
 - Komponen: Box, Flex, Stack, Grid, SidebarLayout, DashboardLayout.
 - Otomatisasi key untuk child React agar aman dari warning.
 - ESM-only, tipe tersedia.
+  - Output library tersedia di `lib/esm` (ESM) dan `lib/cjs` (CJS).
 
 ## Lisensi
 MIT

package/lib/cjs/index.d.ts

@@ -0,0 +1,50 @@
+import * as H from "@damarkuncoro/layout-engine";
+import { useViewport, BreakpointsProvider, useResponsive } from "./viewport.js";
+export type { CSSLength, LayoutProps, HeadlessNode, SidebarLayoutContract, HeaderLayoutContract, DashboardLayoutContract, SplitLayoutContract, AuthLayoutContract, LandingLayoutContract, FlexProps, StackProps, GridProps, ContainerProps, ResponsiveValue, BreakpointKey, Theme, ColorScheme } from "@damarkuncoro/layout-engine";
+export type { BlogPostPresetProps, BlogListPresetProps, ProductGridPresetProps, ProductDetailPresetProps, CartPresetProps, StatsGridPresetProps, DataTablePresetProps, DashboardWidgetPresetProps, SettingsPagePresetProps, SettingsSectionPresetProps, DocsPagePresetProps, ProfilePagePresetProps } from "@damarkuncoro/layout-engine";
+export { resolveResponsive, breakpoints, theme, themeLight, themeDark, getTheme, getSystemColorScheme } from "@damarkuncoro/layout-engine";
+export declare function StatsGridPreset(props: H.StatsGridPresetProps): any;
+export declare function ProductGridPreset(props: H.ProductGridPresetProps): any;
+export declare function ProductDetailPreset(props: H.ProductDetailPresetProps): any;
+export declare function BlogPostPreset(props: H.BlogPostPresetProps): any;
+export declare function BlogListPreset(props: H.BlogListPresetProps): any;
+export declare function CartPreset(props: H.CartPresetProps): any;
+export declare function DataTablePreset(props: H.DataTablePresetProps): any;
+export declare function DashboardWidgetPreset(props: H.DashboardWidgetPresetProps): any;
+export declare function SettingsPagePreset(props: H.SettingsPagePresetProps): any;
+export declare function SettingsSectionPreset(props: H.SettingsSectionPresetProps): any;
+export declare function DocsPagePreset(props: H.DocsPagePresetProps): any;
+export declare function ProfilePagePreset(props: H.ProfilePagePresetProps): any;
+export declare function Box(props: H.LayoutProps & {
+    children?: any;
+}): any;
+export declare function Flex(props: H.FlexProps & {
+    children?: any;
+}): any;
+export declare function Stack(props: H.StackProps & {
+    children?: any;
+}): any;
+export declare function Grid(props: H.GridProps & {
+    children?: any;
+}): any;
+export declare function Container(props: H.ContainerProps & {
+    children?: any;
+}): any;
+export declare function Spacer(props: {
+    size?: any;
+}): any;
+export declare function Center(props: any): any;
+export declare function SidebarLayout(props: any): any;
+export declare function SidebarLayoutAutoVW(props: any): any;
+export declare function HeaderLayout(props: H.HeaderLayoutContract): any;
+export declare function SplitLayout(props: H.SplitLayoutContract): any;
+export declare function DashboardLayout(props: H.DashboardLayoutContract): any;
+export declare function AuthLayout(props: H.AuthLayoutContract): any;
+export declare function LandingLayout(props: H.LandingLayoutContract): any;
+export declare function HeaderContentFooter(props: {
+    header: any;
+    content: any;
+    footer: any;
+}): any;
+export { renderNodeToReact } from "./renderReact.js";
+export { useViewport, BreakpointsProvider, useResponsive };

package/lib/cjs/index.js

@@ -0,0 +1,192 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResponsive = exports.BreakpointsProvider = exports.useViewport = exports.renderNodeToReact = exports.getSystemColorScheme = exports.getTheme = exports.themeDark = exports.themeLight = exports.theme = exports.breakpoints = exports.resolveResponsive = void 0;
+exports.StatsGridPreset = StatsGridPreset;
+exports.ProductGridPreset = ProductGridPreset;
+exports.ProductDetailPreset = ProductDetailPreset;
+exports.BlogPostPreset = BlogPostPreset;
+exports.BlogListPreset = BlogListPreset;
+exports.CartPreset = CartPreset;
+exports.DataTablePreset = DataTablePreset;
+exports.DashboardWidgetPreset = DashboardWidgetPreset;
+exports.SettingsPagePreset = SettingsPagePreset;
+exports.SettingsSectionPreset = SettingsSectionPreset;
+exports.DocsPagePreset = DocsPagePreset;
+exports.ProfilePagePreset = ProfilePagePreset;
+exports.Box = Box;
+exports.Flex = Flex;
+exports.Stack = Stack;
+exports.Grid = Grid;
+exports.Container = Container;
+exports.Spacer = Spacer;
+exports.Center = Center;
+exports.SidebarLayout = SidebarLayout;
+exports.SidebarLayoutAutoVW = SidebarLayoutAutoVW;
+exports.HeaderLayout = HeaderLayout;
+exports.SplitLayout = SplitLayout;
+exports.DashboardLayout = DashboardLayout;
+exports.AuthLayout = AuthLayout;
+exports.LandingLayout = LandingLayout;
+exports.HeaderContentFooter = HeaderContentFooter;
+const H = __importStar(require("@damarkuncoro/layout-engine"));
+const renderReact_js_1 = require("./renderReact.js");
+const viewport_js_1 = require("./viewport.js");
+Object.defineProperty(exports, "useViewport", { enumerable: true, get: function () { return viewport_js_1.useViewport; } });
+Object.defineProperty(exports, "BreakpointsProvider", { enumerable: true, get: function () { return viewport_js_1.BreakpointsProvider; } });
+Object.defineProperty(exports, "useResponsive", { enumerable: true, get: function () { return viewport_js_1.useResponsive; } });
+var layout_engine_1 = require("@damarkuncoro/layout-engine");
+Object.defineProperty(exports, "resolveResponsive", { enumerable: true, get: function () { return layout_engine_1.resolveResponsive; } });
+Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return layout_engine_1.breakpoints; } });
+Object.defineProperty(exports, "theme", { enumerable: true, get: function () { return layout_engine_1.theme; } });
+Object.defineProperty(exports, "themeLight", { enumerable: true, get: function () { return layout_engine_1.themeLight; } });
+Object.defineProperty(exports, "themeDark", { enumerable: true, get: function () { return layout_engine_1.themeDark; } });
+Object.defineProperty(exports, "getTheme", { enumerable: true, get: function () { return layout_engine_1.getTheme; } });
+Object.defineProperty(exports, "getSystemColorScheme", { enumerable: true, get: function () { return layout_engine_1.getSystemColorScheme; } });
+// Preset wrappers (convert headless nodes to React elements)
+function StatsGridPreset(props) {
+    const node = H.StatsGridPreset(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function ProductGridPreset(props) {
+    const node = H.ProductGridPreset(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function ProductDetailPreset(props) {
+    const node = H.ProductDetailPreset(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function BlogPostPreset(props) {
+    const node = H.BlogPostPreset(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function BlogListPreset(props) {
+    const node = H.BlogListPreset(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function CartPreset(props) {
+    const node = H.CartPreset(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function DataTablePreset(props) {
+    const node = H.DataTablePreset(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function DashboardWidgetPreset(props) {
+    const node = H.DashboardWidgetPreset(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function SettingsPagePreset(props) {
+    const node = H.SettingsPagePreset(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function SettingsSectionPreset(props) {
+    const node = H.SettingsSectionPreset(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function DocsPagePreset(props) {
+    const node = H.DocsPagePreset(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function ProfilePagePreset(props) {
+    const node = H.ProfilePagePreset(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function Box(props) {
+    const node = H.Box(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function Flex(props) {
+    const node = H.Flex(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function Stack(props) {
+    const node = H.Stack(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function Grid(props) {
+    const node = H.Grid(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function Container(props) {
+    const node = H.Container(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function Spacer(props) {
+    const node = H.Spacer(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function Center(props) {
+    const node = H.Center(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function SidebarLayout(props) {
+    const node = H.SidebarLayout(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function SidebarLayoutAutoVW(props) {
+    var _a;
+    const vw = (0, viewport_js_1.useViewport)();
+    const node = H.SidebarLayout({ viewportWidth: (_a = props === null || props === void 0 ? void 0 : props.viewportWidth) !== null && _a !== void 0 ? _a : vw, ...props });
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function HeaderLayout(props) {
+    const node = H.HeaderLayout(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function SplitLayout(props) {
+    var _a;
+    const vw = (0, viewport_js_1.useViewport)();
+    const node = H.SplitLayout({ viewportWidth: (_a = props === null || props === void 0 ? void 0 : props.viewportWidth) !== null && _a !== void 0 ? _a : vw, ...props });
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function DashboardLayout(props) {
+    const node = H.DashboardLayout(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function AuthLayout(props) {
+    const node = H.AuthLayout(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function LandingLayout(props) {
+    const node = H.LandingLayout(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+function HeaderContentFooter(props) {
+    const node = H.HeaderContentFooter(props);
+    return (0, renderReact_js_1.renderNodeToReact)(node);
+}
+var renderReact_js_2 = require("./renderReact.js");
+Object.defineProperty(exports, "renderNodeToReact", { enumerable: true, get: function () { return renderReact_js_2.renderNodeToReact; } });

package/lib/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/lib/cjs/renderReact.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderNodeToReact = void 0;
+const react_1 = __importDefault(require("react"));
+const toChild = (c) => {
+    if (c === null || c === undefined || c === false)
+        return null;
+    if (Array.isArray(c))
+        return c.map((item, idx) => {
+            const v = toChild(item);
+            if (react_1.default.isValidElement(v)) {
+                if (v.key == null) {
+                    return react_1.default.cloneElement(v, { key: idx });
+                }
+                return v;
+            }
+            return react_1.default.createElement(react_1.default.Fragment, { key: idx }, v);
+        });
+    if (typeof c === "object" && c.type && c.props)
+        return (0, exports.renderNodeToReact)(c);
+    return c;
+};
+const renderNodeToReact = (node) => {
+    const { type, props } = node;
+    const { children, className, style, ...rest } = props || {};
+    // Merge className and style like standard React
+    const mergedProps = { ...rest };
+    if (className)
+        mergedProps.className = className;
+    if (style)
+        mergedProps.style = { ...style };
+    const child = toChild(children);
+    return react_1.default.createElement(type, mergedProps, child);
+};
+exports.renderNodeToReact = renderNodeToReact;

package/lib/cjs/viewport.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export declare function BreakpointsProvider(props: {
+    initialWidth?: number;
+    breakpoints?: Record<string, number>;
+    children?: any;
+}): React.FunctionComponentElement<React.ProviderProps<{
+    width: number;
+    breakpoints: Record<string, number>;
+}>>;
+export declare function useViewport(): number;
+export declare function useResponsive<T>(value: any): T | undefined;

package/lib/cjs/viewport.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BreakpointsProvider = BreakpointsProvider;
+exports.useViewport = useViewport;
+exports.useResponsive = useResponsive;
+const react_1 = __importDefault(require("react"));
+const layout_engine_1 = require("@damarkuncoro/layout-engine");
+const Ctx = react_1.default.createContext({
+    width: 1024,
+    breakpoints: layout_engine_1.breakpoints
+});
+function BreakpointsProvider(props) {
+    var _a;
+    const [width, setWidth] = react_1.default.useState((_a = props.initialWidth) !== null && _a !== void 0 ? _a : (typeof window !== "undefined" ? window.innerWidth : 1024));
+    react_1.default.useEffect(() => {
+        if (props.initialWidth != null)
+            return;
+        const onResize = () => setWidth(window.innerWidth);
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    }, [props.initialWidth]);
+    const value = react_1.default.useMemo(() => { var _a; return ({ width, breakpoints: (_a = props.breakpoints) !== null && _a !== void 0 ? _a : layout_engine_1.breakpoints }); }, [width, props.breakpoints]);
+    return react_1.default.createElement(Ctx.Provider, { value }, props.children);
+}
+function useViewport() {
+    const ctx = react_1.default.useContext(Ctx);
+    return ctx.width;
+}
+function useResponsive(value) {
+    const w = useViewport();
+    return (0, layout_engine_1.resolveResponsive)(value, w);
+}

package/lib/esm/index.d.ts

@@ -0,0 +1,50 @@
+import * as H from "@damarkuncoro/layout-engine";
+import { useViewport, BreakpointsProvider, useResponsive } from "./viewport.js";
+export type { CSSLength, LayoutProps, HeadlessNode, SidebarLayoutContract, HeaderLayoutContract, DashboardLayoutContract, SplitLayoutContract, AuthLayoutContract, LandingLayoutContract, FlexProps, StackProps, GridProps, ContainerProps, ResponsiveValue, BreakpointKey, Theme, ColorScheme } from "@damarkuncoro/layout-engine";
+export type { BlogPostPresetProps, BlogListPresetProps, ProductGridPresetProps, ProductDetailPresetProps, CartPresetProps, StatsGridPresetProps, DataTablePresetProps, DashboardWidgetPresetProps, SettingsPagePresetProps, SettingsSectionPresetProps, DocsPagePresetProps, ProfilePagePresetProps } from "@damarkuncoro/layout-engine";
+export { resolveResponsive, breakpoints, theme, themeLight, themeDark, getTheme, getSystemColorScheme } from "@damarkuncoro/layout-engine";
+export declare function StatsGridPreset(props: H.StatsGridPresetProps): any;
+export declare function ProductGridPreset(props: H.ProductGridPresetProps): any;
+export declare function ProductDetailPreset(props: H.ProductDetailPresetProps): any;
+export declare function BlogPostPreset(props: H.BlogPostPresetProps): any;
+export declare function BlogListPreset(props: H.BlogListPresetProps): any;
+export declare function CartPreset(props: H.CartPresetProps): any;
+export declare function DataTablePreset(props: H.DataTablePresetProps): any;
+export declare function DashboardWidgetPreset(props: H.DashboardWidgetPresetProps): any;
+export declare function SettingsPagePreset(props: H.SettingsPagePresetProps): any;
+export declare function SettingsSectionPreset(props: H.SettingsSectionPresetProps): any;
+export declare function DocsPagePreset(props: H.DocsPagePresetProps): any;
+export declare function ProfilePagePreset(props: H.ProfilePagePresetProps): any;
+export declare function Box(props: H.LayoutProps & {
+    children?: any;
+}): any;
+export declare function Flex(props: H.FlexProps & {
+    children?: any;
+}): any;
+export declare function Stack(props: H.StackProps & {
+    children?: any;
+}): any;
+export declare function Grid(props: H.GridProps & {
+    children?: any;
+}): any;
+export declare function Container(props: H.ContainerProps & {
+    children?: any;
+}): any;
+export declare function Spacer(props: {
+    size?: any;
+}): any;
+export declare function Center(props: any): any;
+export declare function SidebarLayout(props: any): any;
+export declare function SidebarLayoutAutoVW(props: any): any;
+export declare function HeaderLayout(props: H.HeaderLayoutContract): any;
+export declare function SplitLayout(props: H.SplitLayoutContract): any;
+export declare function DashboardLayout(props: H.DashboardLayoutContract): any;
+export declare function AuthLayout(props: H.AuthLayoutContract): any;
+export declare function LandingLayout(props: H.LandingLayoutContract): any;
+export declare function HeaderContentFooter(props: {
+    header: any;
+    content: any;
+    footer: any;
+}): any;
+export { renderNodeToReact } from "./renderReact.js";
+export { useViewport, BreakpointsProvider, useResponsive };

package/lib/esm/index.js

@@ -0,0 +1,119 @@
+import * as H from "@damarkuncoro/layout-engine";
+import { renderNodeToReact } from "./renderReact.js";
+import { useViewport, BreakpointsProvider, useResponsive } from "./viewport.js";
+export { resolveResponsive, breakpoints, theme, themeLight, themeDark, getTheme, getSystemColorScheme } from "@damarkuncoro/layout-engine";
+// Preset wrappers (convert headless nodes to React elements)
+export function StatsGridPreset(props) {
+    const node = H.StatsGridPreset(props);
+    return renderNodeToReact(node);
+}
+export function ProductGridPreset(props) {
+    const node = H.ProductGridPreset(props);
+    return renderNodeToReact(node);
+}
+export function ProductDetailPreset(props) {
+    const node = H.ProductDetailPreset(props);
+    return renderNodeToReact(node);
+}
+export function BlogPostPreset(props) {
+    const node = H.BlogPostPreset(props);
+    return renderNodeToReact(node);
+}
+export function BlogListPreset(props) {
+    const node = H.BlogListPreset(props);
+    return renderNodeToReact(node);
+}
+export function CartPreset(props) {
+    const node = H.CartPreset(props);
+    return renderNodeToReact(node);
+}
+export function DataTablePreset(props) {
+    const node = H.DataTablePreset(props);
+    return renderNodeToReact(node);
+}
+export function DashboardWidgetPreset(props) {
+    const node = H.DashboardWidgetPreset(props);
+    return renderNodeToReact(node);
+}
+export function SettingsPagePreset(props) {
+    const node = H.SettingsPagePreset(props);
+    return renderNodeToReact(node);
+}
+export function SettingsSectionPreset(props) {
+    const node = H.SettingsSectionPreset(props);
+    return renderNodeToReact(node);
+}
+export function DocsPagePreset(props) {
+    const node = H.DocsPagePreset(props);
+    return renderNodeToReact(node);
+}
+export function ProfilePagePreset(props) {
+    const node = H.ProfilePagePreset(props);
+    return renderNodeToReact(node);
+}
+export function Box(props) {
+    const node = H.Box(props);
+    return renderNodeToReact(node);
+}
+export function Flex(props) {
+    const node = H.Flex(props);
+    return renderNodeToReact(node);
+}
+export function Stack(props) {
+    const node = H.Stack(props);
+    return renderNodeToReact(node);
+}
+export function Grid(props) {
+    const node = H.Grid(props);
+    return renderNodeToReact(node);
+}
+export function Container(props) {
+    const node = H.Container(props);
+    return renderNodeToReact(node);
+}
+export function Spacer(props) {
+    const node = H.Spacer(props);
+    return renderNodeToReact(node);
+}
+export function Center(props) {
+    const node = H.Center(props);
+    return renderNodeToReact(node);
+}
+export function SidebarLayout(props) {
+    const node = H.SidebarLayout(props);
+    return renderNodeToReact(node);
+}
+export function SidebarLayoutAutoVW(props) {
+    var _a;
+    const vw = useViewport();
+    const node = H.SidebarLayout({ viewportWidth: (_a = props === null || props === void 0 ? void 0 : props.viewportWidth) !== null && _a !== void 0 ? _a : vw, ...props });
+    return renderNodeToReact(node);
+}
+export function HeaderLayout(props) {
+    const node = H.HeaderLayout(props);
+    return renderNodeToReact(node);
+}
+export function SplitLayout(props) {
+    var _a;
+    const vw = useViewport();
+    const node = H.SplitLayout({ viewportWidth: (_a = props === null || props === void 0 ? void 0 : props.viewportWidth) !== null && _a !== void 0 ? _a : vw, ...props });
+    return renderNodeToReact(node);
+}
+export function DashboardLayout(props) {
+    const node = H.DashboardLayout(props);
+    return renderNodeToReact(node);
+}
+export function AuthLayout(props) {
+    const node = H.AuthLayout(props);
+    return renderNodeToReact(node);
+}
+export function LandingLayout(props) {
+    const node = H.LandingLayout(props);
+    return renderNodeToReact(node);
+}
+export function HeaderContentFooter(props) {
+    const node = H.HeaderContentFooter(props);
+    return renderNodeToReact(node);
+}
+export { renderNodeToReact } from "./renderReact.js";
+export { useViewport, BreakpointsProvider, useResponsive };

package/lib/esm/renderReact.d.ts

@@ -0,0 +1,6 @@
+type HeadlessNode = {
+    type: string;
+    props: Record<string, any>;
+};
+export declare const renderNodeToReact: (node: HeadlessNode) => any;
+export {};

package/lib/esm/viewport.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export declare function BreakpointsProvider(props: {
+    initialWidth?: number;
+    breakpoints?: Record<string, number>;
+    children?: any;
+}): React.FunctionComponentElement<React.ProviderProps<{
+    width: number;
+    breakpoints: Record<string, number>;
+}>>;
+export declare function useViewport(): number;
+export declare function useResponsive<T>(value: any): T | undefined;

package/lib/esm/viewport.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { resolveResponsive, breakpoints as defaultBps } from "@damarkuncoro/layout-engine";
+const Ctx = React.createContext({
+    width: 1024,
+    breakpoints: defaultBps
+});
+export function BreakpointsProvider(props) {
+    var _a;
+    const [width, setWidth] = React.useState((_a = props.initialWidth) !== null && _a !== void 0 ? _a : (typeof window !== "undefined" ? window.innerWidth : 1024));
+    React.useEffect(() => {
+        if (props.initialWidth != null)
+            return;
+        const onResize = () => setWidth(window.innerWidth);
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    }, [props.initialWidth]);
+    const value = React.useMemo(() => { var _a; return ({ width, breakpoints: (_a = props.breakpoints) !== null && _a !== void 0 ? _a : defaultBps }); }, [width, props.breakpoints]);
+    return React.createElement(Ctx.Provider, { value }, props.children);
+}
+export function useViewport() {
+    const ctx = React.useContext(Ctx);
+    return ctx.width;
+}
+export function useResponsive(value) {
+    const w = useViewport();
+    return resolveResponsive(value, w);
+}

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@damarkuncoro/layout-engine-react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React adapter for layout-engine (headless → React components)",
   "license": "MIT",
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "types": "./lib/esm/index.d.ts",
   "sideEffects": false,
   "files": [
-    "dist"
+    "lib"
   ],
   "keywords": [
     "layout",
@@ -23,23 +23,33 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    }
-  },
-  "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json --noEmit"
+      "types": "./lib/esm/index.d.ts",
+      "import": "./lib/esm/index.js",
+      "require": "./lib/cjs/index.js"
+    },
+    "./package.json": "./package.json"
   },
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "dependencies": {
-    "@damarkuncoro/layout-engine": "^0.1.0"
+    "@damarkuncoro/layout-engine": "^0.1.1"
   },
   "devDependencies": {
     "typescript": "^5.4.0",
-    "@damarkuncoro/layout-engine": "file:../layout-engine"
+    "@damarkuncoro/layout-engine": "file:../layout-engine",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "postbuild:cjs": "node scripts/ensure-cjs.js",
+    "build": "npm run build:esm && npm run build:cjs && npm run postbuild:cjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
   }
-}
+}

package/dist/index.d.ts

@@ -1,18 +0,0 @@
-import * as H from "layout-engine";
-export type { CSSLength, LayoutProps, HeadlessNode, SidebarLayoutContract, DashboardLayoutContract, FlexProps, StackProps, GridProps, ResponsiveValue, BreakpointKey } from "layout-engine";
-export { resolveResponsive, breakpoints } from "layout-engine";
-export declare function Box(props: H.LayoutProps & {
-    children?: any;
-}): any;
-export declare function Flex(props: H.FlexProps & {
-    children?: any;
-}): any;
-export declare function Stack(props: H.StackProps & {
-    children?: any;
-}): any;
-export declare function Grid(props: H.GridProps & {
-    children?: any;
-}): any;
-export declare function SidebarLayout(props: any): any;
-export declare function DashboardLayout(props: H.DashboardLayoutContract): any;
-export { renderNodeToReact } from "./renderReact.js";

package/dist/index.js

@@ -1,28 +0,0 @@
-import * as H from "layout-engine";
-import { renderNodeToReact } from "./renderReact.js";
-export { resolveResponsive, breakpoints } from "layout-engine";
-export function Box(props) {
-    const node = H.Box(props);
-    return renderNodeToReact(node);
-}
-export function Flex(props) {
-    const node = H.Flex(props);
-    return renderNodeToReact(node);
-}
-export function Stack(props) {
-    const node = H.Stack(props);
-    return renderNodeToReact(node);
-}
-export function Grid(props) {
-    const node = H.Grid(props);
-    return renderNodeToReact(node);
-}
-export function SidebarLayout(props) {
-    const node = H.SidebarLayout(props);
-    return renderNodeToReact(node);
-}
-export function DashboardLayout(props) {
-    const node = H.DashboardLayout(props);
-    return renderNodeToReact(node);
-}
-export { renderNodeToReact } from "./renderReact.js";