@dynamic-field-kit/react 1.0.3 → 1.0.5

package/README.md

@@ -130,7 +130,7 @@ The library does **not** ship UI components.
 Instead, applications register their own renderers.
 
 ```ts
-import { fieldRegistry } from "@dynamic-field-kit/core"
+import { fieldRegistry } from "@dynamic-field-kit/react"
 
 fieldRegistry.register("text", ({ value, onValueChange, label }) => (
   <div>
@@ -202,7 +202,7 @@ You **do not** need to modify the library.
 Just extend `FieldTypeMap`:
 
 ```ts
-declare module "@dynamic-field-kit/react" {
+declare module "@dynamic-field-kit/core" {
   interface FieldTypeMap {
     date: Date
   }
@@ -296,4 +296,4 @@ This library intentionally does not include:
 It is a **form engine**, not a full form framework.
 
 ## 📄 License
-MIT © vannt-dev
+MIT © [vannt-dev](https://github.com/vannt-dev)

package/dist/chunk-HAKPX2A2.mjs

@@ -0,0 +1,49 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/layout/layoutRegistry.ts
+var LayoutRegistry = class {
+  constructor() {
+    this.layouts = /* @__PURE__ */ new Map();
+  }
+  register(type, renderer) {
+    if (this.layouts.has(type)) {
+      console.warn(`[dynamic-field-kit] Layout "${type}" already exists`);
+    }
+    this.layouts.set(type, renderer);
+  }
+  get(type) {
+    return this.layouts.get(type);
+  }
+};
+var layoutRegistry = new LayoutRegistry();
+
+export {
+  __commonJS,
+  __toESM,
+  layoutRegistry
+};
+//# sourceMappingURL=chunk-HAKPX2A2.mjs.map

package/dist/chunk-HAKPX2A2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/layout/layoutRegistry.ts"],"sourcesContent":["import React from \"react\"\r\n\r\nexport type LayoutRenderer<C = any> = (props: {\r\n    children: React.ReactNode\r\n    config?: C\r\n}) => React.ReactElement\r\n\r\nexport class LayoutRegistry {\r\n    private layouts = new Map<string, LayoutRenderer>()\r\n\r\n    register(type: string, renderer: LayoutRenderer) {\r\n        if (this.layouts.has(type)) {\r\n            console.warn(`[dynamic-field-kit] Layout \"${type}\" already exists`)\r\n        }\r\n        this.layouts.set(type, renderer)\r\n    }\r\n\r\n    get(type: string): LayoutRenderer | undefined {\r\n        return this.layouts.get(type)\r\n    }\r\n}\r\n\r\nexport const layoutRegistry = new LayoutRegistry()\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,IAAM,iBAAN,MAAqB;AAAA,EAArB;AACH,SAAQ,UAAU,oBAAI,IAA4B;AAAA;AAAA,EAElD,SAAS,MAAc,UAA0B;AAC7C,QAAI,KAAK,QAAQ,IAAI,IAAI,GAAG;AACxB,cAAQ,KAAK,+BAA+B,IAAI,kBAAkB;AAAA,IACtE;AACA,SAAK,QAAQ,IAAI,MAAM,QAAQ;AAAA,EACnC;AAAA,EAEA,IAAI,MAA0C;AAC1C,WAAO,KAAK,QAAQ,IAAI,IAAI;AAAA,EAChC;AACJ;AAEO,IAAM,iBAAiB,IAAI,eAAe;","names":[]}

package/dist/defaultLayouts-PVN6T4LH.mjs

@@ -0,0 +1,40 @@
+import {
+  layoutRegistry
+} from "./chunk-HAKPX2A2.mjs";
+
+// src/layout/defaultLayouts.tsx
+import { jsx } from "react/jsx-runtime";
+layoutRegistry.register("column", ({ children, config }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: config?.gap ?? 12
+    },
+    children
+  }
+));
+layoutRegistry.register("row", ({ children, config }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    style: {
+      display: "flex",
+      flexDirection: "row",
+      gap: config?.gap ?? 12
+    },
+    children
+  }
+));
+layoutRegistry.register("grid", ({ children, config }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    style: {
+      display: "grid",
+      gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,
+      gap: config?.gap ?? 12
+    },
+    children
+  }
+));
+//# sourceMappingURL=defaultLayouts-PVN6T4LH.mjs.map

package/dist/defaultLayouts-PVN6T4LH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/layout/defaultLayouts.tsx"],"sourcesContent":["import { layoutRegistry } from \"./layoutRegistry\"\r\n\r\nlayoutRegistry.register(\"column\", ({ children, config }) => (\r\n    <div\r\n        style={{\r\n            display: \"flex\",\r\n            flexDirection: \"column\",\r\n            gap: config?.gap ?? 12,\r\n        }}\r\n    >\r\n        {children}\r\n    </div>\r\n))\r\n\r\nlayoutRegistry.register(\"row\", ({ children, config }) => (\r\n    <div\r\n        style={{\r\n            display: \"flex\",\r\n            flexDirection: \"row\",\r\n            gap: config?.gap ?? 12,\r\n        }}\r\n    >\r\n        {children}\r\n    </div>\r\n))\r\n\r\nlayoutRegistry.register(\"grid\", ({ children, config }) => (\r\n    <div\r\n        style={{\r\n            display: \"grid\",\r\n            gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,\r\n            gap: config?.gap ?? 12,\r\n        }}\r\n    >\r\n        {children}\r\n    </div>\r\n))"],"mappings":";;;;;AAGI;AADJ,eAAe,SAAS,UAAU,CAAC,EAAE,UAAU,OAAO,MAClD;AAAA,EAAC;AAAA;AAAA,IACG,OAAO;AAAA,MACH,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAK,QAAQ,OAAO;AAAA,IACxB;AAAA,IAEC;AAAA;AACL,CACH;AAED,eAAe,SAAS,OAAO,CAAC,EAAE,UAAU,OAAO,MAC/C;AAAA,EAAC;AAAA;AAAA,IACG,OAAO;AAAA,MACH,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAK,QAAQ,OAAO;AAAA,IACxB;AAAA,IAEC;AAAA;AACL,CACH;AAED,eAAe,SAAS,QAAQ,CAAC,EAAE,UAAU,OAAO,MAChD;AAAA,EAAC;AAAA;AAAA,IACG,OAAO;AAAA,MACH,SAAS;AAAA,MACT,qBAAqB,UAAU,QAAQ,WAAW,CAAC;AAAA,MACnD,KAAK,QAAQ,OAAO;AAAA,IACxB;AAAA,IAEC;AAAA;AACL,CACH;","names":[]}

package/dist/index.d.mts

@@ -1,30 +1,51 @@
+import React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { FieldTypeKey as FieldTypeKey$1, FieldDescription, Properties } from '@dynamic-field-kit/core';
+import { FieldTypeKey, FieldDescription, Properties } from '@dynamic-field-kit/core';
+export { FieldDescription, FieldRendererProps, FieldTypeKey, fieldRegistry } from '@dynamic-field-kit/core';
 
-interface FieldTypeMap {
+type LayoutRenderer<C = any> = (props: {
+    children: React.ReactNode;
+    config?: C;
+}) => React.ReactElement;
+declare class LayoutRegistry {
+    private layouts;
+    register(type: string, renderer: LayoutRenderer): void;
+    get(type: string): LayoutRenderer | undefined;
 }
-type FieldTypeKey = keyof FieldTypeMap | string;
+declare const layoutRegistry: LayoutRegistry;
 
-interface Props$2<T extends FieldTypeKey$1> {
+type BaseLayout = "column" | "row" | {
+    type: "grid";
+    columns?: number;
+    gap?: number;
+};
+type LayoutConfig = BaseLayout | {
+    type: "responsive";
+    mobile: BaseLayout;
+    desktop: BaseLayout;
+};
+
+interface Props$2<T extends FieldTypeKey> {
     type: T;
     value?: any;
     onChange?: (value: any) => void;
     label?: string;
 }
-declare const DynamicInput: <T extends FieldTypeKey$1>({ type, value, onChange, label, }: Props$2<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicInput: <T extends FieldTypeKey>({ type, value, onChange, label }: Props$2<T>) => react_jsx_runtime.JSX.Element;
 
 interface Props$1 {
     fieldDescription: FieldDescription;
     renderInfos: Properties;
     onValueChangeField: (value: any, key: string) => void;
 }
-declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField, }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField }: Props$1) => react_jsx_runtime.JSX.Element;
 
 interface Props {
     fieldDescriptions: FieldDescription[];
     properties?: Properties;
     onChange?: (data: Properties) => void;
+    layout?: LayoutConfig;
 }
-declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, }: Props) => react_jsx_runtime.JSX.Element;
+declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout }: Props) => react_jsx_runtime.JSX.Element;
 
-export { DynamicInput, FieldInput, type FieldTypeKey, type FieldTypeMap, MultiFieldInput };
+export { DynamicInput, FieldInput, type LayoutConfig, MultiFieldInput, layoutRegistry };

package/dist/index.d.ts

@@ -1,30 +1,51 @@
+import React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { FieldTypeKey as FieldTypeKey$1, FieldDescription, Properties } from '@dynamic-field-kit/core';
+import { FieldTypeKey, FieldDescription, Properties } from '@dynamic-field-kit/core';
+export { FieldDescription, FieldRendererProps, FieldTypeKey, fieldRegistry } from '@dynamic-field-kit/core';
 
-interface FieldTypeMap {
+type LayoutRenderer<C = any> = (props: {
+    children: React.ReactNode;
+    config?: C;
+}) => React.ReactElement;
+declare class LayoutRegistry {
+    private layouts;
+    register(type: string, renderer: LayoutRenderer): void;
+    get(type: string): LayoutRenderer | undefined;
 }
-type FieldTypeKey = keyof FieldTypeMap | string;
+declare const layoutRegistry: LayoutRegistry;
 
-interface Props$2<T extends FieldTypeKey$1> {
+type BaseLayout = "column" | "row" | {
+    type: "grid";
+    columns?: number;
+    gap?: number;
+};
+type LayoutConfig = BaseLayout | {
+    type: "responsive";
+    mobile: BaseLayout;
+    desktop: BaseLayout;
+};
+
+interface Props$2<T extends FieldTypeKey> {
     type: T;
     value?: any;
     onChange?: (value: any) => void;
     label?: string;
 }
-declare const DynamicInput: <T extends FieldTypeKey$1>({ type, value, onChange, label, }: Props$2<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicInput: <T extends FieldTypeKey>({ type, value, onChange, label }: Props$2<T>) => react_jsx_runtime.JSX.Element;
 
 interface Props$1 {
     fieldDescription: FieldDescription;
     renderInfos: Properties;
     onValueChangeField: (value: any, key: string) => void;
 }
-declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField, }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField }: Props$1) => react_jsx_runtime.JSX.Element;
 
 interface Props {
     fieldDescriptions: FieldDescription[];
     properties?: Properties;
     onChange?: (data: Properties) => void;
+    layout?: LayoutConfig;
 }
-declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, }: Props) => react_jsx_runtime.JSX.Element;
+declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout }: Props) => react_jsx_runtime.JSX.Element;
 
-export { DynamicInput, FieldInput, type FieldTypeKey, type FieldTypeMap, MultiFieldInput };
+export { DynamicInput, FieldInput, type LayoutConfig, MultiFieldInput, layoutRegistry };

package/dist/index.js

@@ -1,8 +1,16 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -15,53 +23,196 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/layout/layoutRegistry.ts
+var LayoutRegistry, layoutRegistry;
+var init_layoutRegistry = __esm({
+  "src/layout/layoutRegistry.ts"() {
+    "use strict";
+    LayoutRegistry = class {
+      constructor() {
+        this.layouts = /* @__PURE__ */ new Map();
+      }
+      register(type, renderer) {
+        if (this.layouts.has(type)) {
+          console.warn(`[dynamic-field-kit] Layout "${type}" already exists`);
+        }
+        this.layouts.set(type, renderer);
+      }
+      get(type) {
+        return this.layouts.get(type);
+      }
+    };
+    layoutRegistry = new LayoutRegistry();
+  }
+});
+
+// src/layout/defaultLayouts.tsx
+var defaultLayouts_exports = {};
+var import_jsx_runtime;
+var init_defaultLayouts = __esm({
+  "src/layout/defaultLayouts.tsx"() {
+    "use strict";
+    init_layoutRegistry();
+    import_jsx_runtime = require("react/jsx-runtime");
+    layoutRegistry.register("column", ({ children, config }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: config?.gap ?? 12
+        },
+        children
+      }
+    ));
+    layoutRegistry.register("row", ({ children, config }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "row",
+          gap: config?.gap ?? 12
+        },
+        children
+      }
+    ));
+    layoutRegistry.register("grid", ({ children, config }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,
+          gap: config?.gap ?? 12
+        },
+        children
+      }
+    ));
+  }
+});
+
+// src/layout/responsiveLayout.tsx
+var responsiveLayout_exports = {};
+function resolve(layout) {
+  if (typeof layout === "string") {
+    return { type: layout, config: {} };
+  }
+  return { type: layout.type, config: layout };
+}
+var import_jsx_runtime2;
+var init_responsiveLayout = __esm({
+  "src/layout/responsiveLayout.tsx"() {
+    "use strict";
+    init_layoutRegistry();
+    import_jsx_runtime2 = require("react/jsx-runtime");
+    layoutRegistry.register("responsive", ({ children, config }) => {
+      const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
+      const current = isMobile ? config.mobile : config.desktop;
+      if (!current) return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        children,
+        " "
+      ] });
+      const { type, config: childConfig } = resolve(current);
+      const Renderer = layoutRegistry.get(type);
+      if (!Renderer) return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        children,
+        " "
+      ] });
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Renderer, { config: childConfig, children });
+    });
+  }
+});
+
+// ../core/dist/index.js
+var require_dist = __commonJS({
+  "../core/dist/index.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from === "object" || typeof from === "function") {
+        for (let key of __getOwnPropNames2(from))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var index_exports2 = {};
+    __export2(index_exports2, {
+      FieldRegistry: () => FieldRegistry,
+      fieldRegistry: () => fieldRegistry3
+    });
+    module2.exports = __toCommonJS2(index_exports2);
+    var FieldRegistry = class {
+      constructor() {
+        this.registry = {};
+      }
+      // ✅ Type safety ở API
+      register(type, renderer) {
+        this.registry[type] = renderer;
+      }
+      get(type) {
+        return this.registry[type];
+      }
+    };
+    var fieldRegistry3 = new FieldRegistry();
+  }
+});
+
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
   DynamicInput: () => DynamicInput_default,
   FieldInput: () => FieldInput_default,
-  MultiFieldInput: () => MultiFieldInput_default
+  MultiFieldInput: () => MultiFieldInput_default,
+  fieldRegistry: () => import_core2.fieldRegistry,
+  layoutRegistry: () => layoutRegistry
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/DynamicInput.tsx
-var import_core = require("@dynamic-field-kit/core");
-var import_jsx_runtime = require("react/jsx-runtime");
-var DynamicInput = ({
-  type,
-  value,
-  onChange,
-  label
-}) => {
+// src/registerDefaults.ts
+async function registerDefaults() {
+  await Promise.resolve().then(() => (init_defaultLayouts(), defaultLayouts_exports));
+  await Promise.resolve().then(() => (init_responsiveLayout(), responsiveLayout_exports));
+}
+
+// src/layout/index.ts
+init_layoutRegistry();
+
+// src/components/DynamicInput.tsx
+var import_core = __toESM(require_dist());
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DynamicInput = ({ type, value, onChange, label }) => {
   const Renderer = import_core.fieldRegistry.get(type);
-  if (!Renderer) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-      "Unknown field type: ",
-      type
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Renderer,
-    {
-      value,
-      onValueChange: onChange,
-      label
-    }
-  );
+  if (!Renderer) return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+    "Unknown field type: ",
+    type
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Renderer, { value, onValueChange: onChange, label });
 };
 var DynamicInput_default = DynamicInput;
 
-// src/FieldInput.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var FieldInput = ({
-  fieldDescription,
-  renderInfos,
-  onValueChangeField
-}) => {
+// src/components/FieldInput.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }) => {
   const { name, type, label } = fieldDescription;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     DynamicInput_default,
     {
       type,
@@ -73,25 +224,29 @@ var FieldInput = ({
 };
 var FieldInput_default = FieldInput;
 
-// src/MultiFieldInput.tsx
+// src/components/MultiFieldInput.tsx
 var import_react = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var MultiFieldInput = ({
-  fieldDescriptions,
-  properties,
-  onChange
-}) => {
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function resolveLayout(layout) {
+  if (!layout) return { type: "column", config: {} };
+  if (typeof layout === "string") return { type: layout, config: {} };
+  return { type: layout.type, config: layout };
+}
+var MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }) => {
   const [data, setData] = (0, import_react.useState)({});
   (0, import_react.useEffect)(() => {
     if (properties) setData(properties);
   }, [properties]);
   const visibleFields = (0, import_react.useMemo)(
-    () => fieldDescriptions.filter(
-      (f) => !f.appearCondition || f.appearCondition(data)
-    ),
+    () => fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(data)),
     [fieldDescriptions, data]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: visibleFields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const { type, config } = resolveLayout(layout);
+  const Layout = layoutRegistry.get(type);
+  if (!Layout) {
+    throw new Error(`Unknown layout: ${type}`);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     FieldInput_default,
     {
       fieldDescription: f,
@@ -101,14 +256,21 @@ var MultiFieldInput = ({
         setData(next);
         onChange?.(next);
       }
-    }
-  ) }, f.name)) });
+    },
+    f.name
+  )) });
 };
 var MultiFieldInput_default = MultiFieldInput;
+
+// src/index.ts
+var import_core2 = __toESM(require_dist());
+registerDefaults();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DynamicInput,
   FieldInput,
-  MultiFieldInput
+  MultiFieldInput,
+  fieldRegistry,
+  layoutRegistry
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/DynamicInput.tsx","../src/FieldInput.tsx","../src/MultiFieldInput.tsx"],"sourcesContent":["export * from \"./types\"\r\nexport { default as DynamicInput } from \"./DynamicInput\"\r\nexport { default as FieldInput } from \"./FieldInput\"\r\nexport { default as MultiFieldInput } from \"./MultiFieldInput\"\r\n","import { fieldRegistry, FieldTypeKey } from \"@dynamic-field-kit/core\"\r\n\r\ninterface Props<T extends FieldTypeKey> {\r\n    type: T\r\n    value?: any\r\n    onChange?: (value: any) => void\r\n    label?: string\r\n}\r\n\r\nconst DynamicInput = <T extends FieldTypeKey>({\r\n    type,\r\n    value,\r\n    onChange,\r\n    label,\r\n}: Props<T>) => {\r\n    const Renderer = fieldRegistry.get(type)\r\n\r\n    if (!Renderer) {\r\n        return <div>Unknown field type: {type}</div>\r\n    }\r\n\r\n    return (\r\n        <Renderer\r\n            value={value}\r\n            onValueChange={onChange}\r\n            label={label}\r\n        />\r\n    )\r\n}\r\n\r\nexport default DynamicInput\r\n","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport DynamicInput from \"./DynamicInput\"\r\n\r\ninterface Props {\r\n  fieldDescription: FieldDescription\r\n  renderInfos: Properties\r\n  onValueChangeField: (value: any, key: string) => void\r\n}\r\n\r\nconst FieldInput = ({\r\n  fieldDescription,\r\n  renderInfos,\r\n  onValueChangeField,\r\n}: Props) => {\r\n  const { name, type, label } = fieldDescription\r\n\r\n  return (\r\n    <DynamicInput\r\n      type={type}\r\n      label={label}\r\n      value={renderInfos[name]}\r\n      onChange={(v) => onValueChangeField(v, name)}\r\n    />\r\n  )\r\n}\r\n\r\nexport default FieldInput\r\n","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport { Fragment, useEffect, useMemo, useState } from \"react\"\r\nimport FieldInput from \"./FieldInput\"\r\n\r\ninterface Props {\r\n  fieldDescriptions: FieldDescription[]\r\n  properties?: Properties\r\n  onChange?: (data: Properties) => void\r\n}\r\n\r\nconst MultiFieldInput = ({\r\n  fieldDescriptions,\r\n  properties,\r\n  onChange,\r\n}: Props) => {\r\n  const [data, setData] = useState<Properties>({})\r\n\r\n  useEffect(() => {\r\n    if (properties) setData(properties)\r\n  }, [properties])\r\n\r\n  const visibleFields = useMemo(\r\n    () =>\r\n      fieldDescriptions.filter(\r\n        (f) => !f.appearCondition || f.appearCondition(data)\r\n      ),\r\n    [fieldDescriptions, data]\r\n  )\r\n\r\n  return (\r\n    <>\r\n      {visibleFields.map((f) => (\r\n        <Fragment key={f.name}>\r\n          <FieldInput\r\n            fieldDescription={f}\r\n            renderInfos={data}\r\n            onValueChangeField={(value, key) => {\r\n              const next = { ...data, [key]: value }\r\n              setData(next)\r\n              onChange?.(next)\r\n            }}\r\n          />\r\n        </Fragment>\r\n      ))}\r\n    </>\r\n  )\r\n}\r\n\r\nexport default MultiFieldInput\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,kBAA4C;AAkB7B;AATf,IAAM,eAAe,CAAyB;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAgB;AACZ,QAAM,WAAW,0BAAc,IAAI,IAAI;AAEvC,MAAI,CAAC,UAAU;AACX,WAAO,6CAAC,SAAI;AAAA;AAAA,MAAqB;AAAA,OAAK;AAAA,EAC1C;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAe;AAAA,MACf;AAAA;AAAA,EACJ;AAER;AAEA,IAAO,uBAAQ;;;ACbX,IAAAA,sBAAA;AARJ,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,MAAa;AACX,QAAM,EAAE,MAAM,MAAM,MAAM,IAAI;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO,YAAY,IAAI;AAAA,MACvB,UAAU,CAAC,MAAM,mBAAmB,GAAG,IAAI;AAAA;AAAA,EAC7C;AAEJ;AAEA,IAAO,qBAAQ;;;ACzBf,mBAAuD;AA6BnD,IAAAC,sBAAA;AApBJ,IAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAAa;AACX,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAqB,CAAC,CAAC;AAE/C,8BAAU,MAAM;AACd,QAAI,WAAY,SAAQ,UAAU;AAAA,EACpC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,oBAAgB;AAAA,IACpB,MACE,kBAAkB;AAAA,MAChB,CAAC,MAAM,CAAC,EAAE,mBAAmB,EAAE,gBAAgB,IAAI;AAAA,IACrD;AAAA,IACF,CAAC,mBAAmB,IAAI;AAAA,EAC1B;AAEA,SACE,6EACG,wBAAc,IAAI,CAAC,MAClB,6CAAC,yBACC;AAAA,IAAC;AAAA;AAAA,MACC,kBAAkB;AAAA,MAClB,aAAa;AAAA,MACb,oBAAoB,CAAC,OAAO,QAAQ;AAClC,cAAM,OAAO,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM;AACrC,gBAAQ,IAAI;AACZ,mBAAW,IAAI;AAAA,MACjB;AAAA;AAAA,EACF,KATa,EAAE,IAUjB,CACD,GACH;AAEJ;AAEA,IAAO,0BAAQ;","names":["import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../src/layout/layoutRegistry.ts","../src/layout/defaultLayouts.tsx","../src/layout/responsiveLayout.tsx","../../core/src/index.ts","../../core/src/fieldRegistry.ts","../src/index.ts","../src/registerDefaults.ts","../src/layout/index.ts","../src/components/DynamicInput.tsx","../src/components/FieldInput.tsx","../src/components/MultiFieldInput.tsx"],"sourcesContent":["import React from \"react\"\r\n\r\nexport type LayoutRenderer<C = any> = (props: {\r\n    children: React.ReactNode\r\n    config?: C\r\n}) => React.ReactElement\r\n\r\nexport class LayoutRegistry {\r\n    private layouts = new Map<string, LayoutRenderer>()\r\n\r\n    register(type: string, renderer: LayoutRenderer) {\r\n        if (this.layouts.has(type)) {\r\n            console.warn(`[dynamic-field-kit] Layout \"${type}\" already exists`)\r\n        }\r\n        this.layouts.set(type, renderer)\r\n    }\r\n\r\n    get(type: string): LayoutRenderer | undefined {\r\n        return this.layouts.get(type)\r\n    }\r\n}\r\n\r\nexport const layoutRegistry = new LayoutRegistry()\r\n","import { layoutRegistry } from \"./layoutRegistry\"\r\n\r\nlayoutRegistry.register(\"column\", ({ children, config }) => (\r\n    <div\r\n        style={{\r\n            display: \"flex\",\r\n            flexDirection: \"column\",\r\n            gap: config?.gap ?? 12,\r\n        }}\r\n    >\r\n        {children}\r\n    </div>\r\n))\r\n\r\nlayoutRegistry.register(\"row\", ({ children, config }) => (\r\n    <div\r\n        style={{\r\n            display: \"flex\",\r\n            flexDirection: \"row\",\r\n            gap: config?.gap ?? 12,\r\n        }}\r\n    >\r\n        {children}\r\n    </div>\r\n))\r\n\r\nlayoutRegistry.register(\"grid\", ({ children, config }) => (\r\n    <div\r\n        style={{\r\n            display: \"grid\",\r\n            gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,\r\n            gap: config?.gap ?? 12,\r\n        }}\r\n    >\r\n        {children}\r\n    </div>\r\n))","import { layoutRegistry } from \"./layoutRegistry\"\r\nimport { LayoutConfig } from \"../types/layout\"\r\n\r\nfunction resolve(layout: LayoutConfig) {\r\n    if (typeof layout === \"string\") {\r\n        return { type: layout, config: {} }\r\n    }\r\n    return { type: layout.type, config: layout }\r\n}\r\n\r\nlayoutRegistry.register(\"responsive\", ({ children, config }) => {\r\n    const isMobile =\r\n        typeof window !== \"undefined\" && window.innerWidth < 768\r\n\r\n    const current = isMobile ? config.mobile : config.desktop\r\n    if (!current) return <>{ children } </>\r\n\r\n    const { type, config: childConfig } = resolve(current)\r\n    const Renderer = layoutRegistry.get(type)\r\n\r\n    if (!Renderer) return <>{ children } </>\r\n\r\n    return (\r\n        <Renderer config= { childConfig } >\r\n        { children }\r\n        </Renderer>\r\n    )\r\n})\r\n","export * from \"./types\"\r\nexport * from \"./fieldRegistry\"\r\n","import { JSX } from \"react\"\r\nimport type { FieldRendererProps, FieldTypeMap } from \"./types\"\r\n\r\nexport type FieldRenderer<T = any> = (props: FieldRendererProps<T>) => JSX.Element\r\n\r\nexport class FieldRegistry {\r\n    // ❗ INTERNAL = string, KHÔNG constrain\r\n    private registry: Record<string, FieldRenderer<any>> = {}\r\n\r\n    // ✅ Type safety ở API\r\n    register<K extends keyof FieldTypeMap>(\r\n        type: K,\r\n        renderer: FieldRenderer<FieldTypeMap[K]>\r\n    ) {\r\n        this.registry[type as string] = renderer\r\n    }\r\n\r\n    get<K extends keyof FieldTypeMap>(\r\n        type: K\r\n    ): FieldRenderer<FieldTypeMap[K]> | undefined {\r\n        return this.registry[type as string]\r\n    }\r\n}\r\n\r\nexport const fieldRegistry = new FieldRegistry()\r\n","import { registerDefaults } from \"./registerDefaults\"\r\n\r\nregisterDefaults()\r\n\r\n\r\nexport { layoutRegistry } from \"./layout\"\r\n\r\n\r\nexport { default as DynamicInput } from \"./components/DynamicInput\"\r\nexport { default as FieldInput } from \"./components/FieldInput\"\r\nexport { default as MultiFieldInput } from \"./components/MultiFieldInput\"\r\n\r\n\r\nexport type { LayoutConfig } from \"./types/layout\"\r\n// 🔁 Re-export từ core (CÙNG INSTANCE ĐÃ BUNDLE)\r\nexport {\r\n    fieldRegistry,\r\n    type FieldTypeKey,\r\n    type FieldDescription,\r\n    type FieldRendererProps,\r\n} from \"@dynamic-field-kit/core\"\r\n","export async function registerDefaults() {\r\n    await import(\"./layout/defaultLayouts\")\r\n    await import(\"./layout/responsiveLayout\")\r\n}\r\n","export { layoutRegistry } from \"./layoutRegistry\"\r\nexport type { LayoutConfig } from \"../types/layout\"","import { fieldRegistry, FieldTypeKey } from \"@dynamic-field-kit/core\"\r\n\r\ninterface Props<T extends FieldTypeKey> {\r\n    type: T\r\n    value?: any\r\n    onChange?: (value: any) => void\r\n    label?: string\r\n}\r\n\r\n\r\nconst DynamicInput = <T extends FieldTypeKey>({ type, value, onChange, label }: Props<T>) => {\r\n    const Renderer = fieldRegistry.get(type)\r\n\r\n\r\n    if (!Renderer) return <div>Unknown field type: {type}</div>\r\n\r\n\r\n    return <Renderer value={value} onValueChange={onChange} label={label} />\r\n}\r\n\r\n\r\nexport default DynamicInput","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport DynamicInput from \"./DynamicInput\"\r\n\r\ninterface Props {\r\n  fieldDescription: FieldDescription\r\n  renderInfos: Properties\r\n  onValueChangeField: (value: any, key: string) => void\r\n}\r\n\r\n\r\nconst FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }: Props) => {\r\n  const { name, type, label } = fieldDescription\r\n\r\n\r\n  return (\r\n    <DynamicInput\r\n      type={type}\r\n      label={label}\r\n      value={renderInfos[name]}\r\n      onChange={(v) => onValueChangeField(v, name)}\r\n    />\r\n  )\r\n}\r\n\r\n\r\nexport default FieldInput\r\n","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport { Fragment, useEffect, useMemo, useState } from \"react\"\r\nimport FieldInput from \"./FieldInput\"\r\nimport { layoutRegistry } from \"../layout\"\r\nimport { LayoutConfig } from \"../types/layout\"\r\n\r\n\r\ninterface Props {\r\n  fieldDescriptions: FieldDescription[]\r\n  properties?: Properties\r\n  onChange?: (data: Properties) => void\r\n  layout?: LayoutConfig\r\n}\r\n\r\n\r\nfunction resolveLayout(layout?: LayoutConfig) {\r\n  if (!layout) return { type: \"column\", config: {} }\r\n  if (typeof layout === \"string\") return { type: layout, config: {} }\r\n  return { type: layout.type, config: layout }\r\n}\r\n\r\n\r\nconst MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }: Props) => {\r\n  const [data, setData] = useState<Properties>({})\r\n\r\n  useEffect(() => {\r\n    if (properties) setData(properties)\r\n  }, [properties])\r\n\r\n  const visibleFields = useMemo(\r\n    () => fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(data)),\r\n    [fieldDescriptions, data]\r\n  )\r\n\r\n  const { type, config } = resolveLayout(layout)\r\n  \r\n  const Layout = layoutRegistry.get(type)\r\n\r\n  if (!Layout) {\r\n    throw new Error(`Unknown layout: ${type}`)\r\n  }\r\n\r\n  return (\r\n    <Layout config={config}>\r\n      {visibleFields.map((f) => (\r\n        <FieldInput\r\n          key={f.name}\r\n          fieldDescription={f}\r\n          renderInfos={data}\r\n          onValueChangeField={(value, key) => {\r\n            const next = { ...data, [key]: value }\r\n            setData(next)\r\n            onChange?.(next)\r\n          }}\r\n        />\r\n      ))}\r\n    </Layout>\r\n  )\r\n}\r\n\r\n\r\nexport default MultiFieldInput\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAOa,gBAeA;AAtBb;AAAA;AAAA;AAOO,IAAM,iBAAN,MAAqB;AAAA,MAArB;AACH,aAAQ,UAAU,oBAAI,IAA4B;AAAA;AAAA,MAElD,SAAS,MAAc,UAA0B;AAC7C,YAAI,KAAK,QAAQ,IAAI,IAAI,GAAG;AACxB,kBAAQ,KAAK,+BAA+B,IAAI,kBAAkB;AAAA,QACtE;AACA,aAAK,QAAQ,IAAI,MAAM,QAAQ;AAAA,MACnC;AAAA,MAEA,IAAI,MAA0C;AAC1C,eAAO,KAAK,QAAQ,IAAI,IAAI;AAAA,MAChC;AAAA,IACJ;AAEO,IAAM,iBAAiB,IAAI,eAAe;AAAA;AAAA;;;ACtBjD;AAAA,IAGI;AAHJ;AAAA;AAAA;AAAA;AAGI;AADJ,mBAAe,SAAS,UAAU,CAAC,EAAE,UAAU,OAAO,MAClD;AAAA,MAAC;AAAA;AAAA,QACG,OAAO;AAAA,UACH,SAAS;AAAA,UACT,eAAe;AAAA,UACf,KAAK,QAAQ,OAAO;AAAA,QACxB;AAAA,QAEC;AAAA;AAAA,IACL,CACH;AAED,mBAAe,SAAS,OAAO,CAAC,EAAE,UAAU,OAAO,MAC/C;AAAA,MAAC;AAAA;AAAA,QACG,OAAO;AAAA,UACH,SAAS;AAAA,UACT,eAAe;AAAA,UACf,KAAK,QAAQ,OAAO;AAAA,QACxB;AAAA,QAEC;AAAA;AAAA,IACL,CACH;AAED,mBAAe,SAAS,QAAQ,CAAC,EAAE,UAAU,OAAO,MAChD;AAAA,MAAC;AAAA;AAAA,QACG,OAAO;AAAA,UACH,SAAS;AAAA,UACT,qBAAqB,UAAU,QAAQ,WAAW,CAAC;AAAA,UACnD,KAAK,QAAQ,OAAO;AAAA,QACxB;AAAA,QAEC;AAAA;AAAA,IACL,CACH;AAAA;AAAA;;;ACpCD;AAGA,SAAS,QAAQ,QAAsB;AACnC,MAAI,OAAO,WAAW,UAAU;AAC5B,WAAO,EAAE,MAAM,QAAQ,QAAQ,CAAC,EAAE;AAAA,EACtC;AACA,SAAO,EAAE,MAAM,OAAO,MAAM,QAAQ,OAAO;AAC/C;AARA,IAeyBA;AAfzB;AAAA;AAAA;AAAA;AAeyB,IAAAA,sBAAA;AALzB,mBAAe,SAAS,cAAc,CAAC,EAAE,UAAU,OAAO,MAAM;AAC5D,YAAM,WACF,OAAO,WAAW,eAAe,OAAO,aAAa;AAEzD,YAAM,UAAU,WAAW,OAAO,SAAS,OAAO;AAClD,UAAI,CAAC,QAAS,QAAO,8EAAI;AAAA;AAAA,QAAU;AAAA,SAAC;AAEpC,YAAM,EAAE,MAAM,QAAQ,YAAY,IAAI,QAAQ,OAAO;AACrD,YAAM,WAAW,eAAe,IAAI,IAAI;AAExC,UAAI,CAAC,SAAU,QAAO,8EAAI;AAAA;AAAA,QAAU;AAAA,SAAC;AAErC,aACI,6CAAC,YAAS,QAAU,aAClB,UACF;AAAA,IAER,CAAC;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;AC3BD,QAAAC,iBAAA,CAAA;AAAA,IAAAC,UAAAD,gBAAA;MAAA,eAAA,MAAA;MAAA,eAAA,MAAAE;IAAA,CAAA;AAAA,IAAAC,QAAA,UAAAC,cAAAJ,cAAA;ACKO,QAAM,gBAAN,MAAoB;MAApB,cAAA;AAEH,aAAQ,WAA+C,CAAC;MAAA;;MAGxD,SACI,MACA,UACF;AACE,aAAK,SAAS,IAAc,IAAI;MACpC;MAEA,IACI,MAC0C;AAC1C,eAAO,KAAK,SAAS,IAAc;MACvC;IACJ;AAEO,QAAME,iBAAgB,IAAI,cAAc;;;;;ACxB/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,eAAsB,mBAAmB;AACrC,QAAM;AACN,QAAM;AACV;;;ACHA;;;ACAA,kBAA4C;AAclB,IAAAG,sBAAA;AAJ1B,IAAM,eAAe,CAAyB,EAAE,MAAM,OAAO,UAAU,MAAM,MAAgB;AACzF,QAAM,WAAW,0BAAc,IAAI,IAAI;AAGvC,MAAI,CAAC,SAAU,QAAO,8CAAC,SAAI;AAAA;AAAA,IAAqB;AAAA,KAAK;AAGrD,SAAO,6CAAC,YAAS,OAAc,eAAe,UAAU,OAAc;AAC1E;AAGA,IAAO,uBAAQ;;;ACNX,IAAAC,sBAAA;AALJ,IAAM,aAAa,CAAC,EAAE,kBAAkB,aAAa,mBAAmB,MAAa;AACnF,QAAM,EAAE,MAAM,MAAM,MAAM,IAAI;AAG9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO,YAAY,IAAI;AAAA,MACvB,UAAU,CAAC,MAAM,mBAAmB,GAAG,IAAI;AAAA;AAAA,EAC7C;AAEJ;AAGA,IAAO,qBAAQ;;;ACxBf,mBAAuD;AA4C/C,IAAAC,sBAAA;AA9BR,SAAS,cAAc,QAAuB;AAC5C,MAAI,CAAC,OAAQ,QAAO,EAAE,MAAM,UAAU,QAAQ,CAAC,EAAE;AACjD,MAAI,OAAO,WAAW,SAAU,QAAO,EAAE,MAAM,QAAQ,QAAQ,CAAC,EAAE;AAClE,SAAO,EAAE,MAAM,OAAO,MAAM,QAAQ,OAAO;AAC7C;AAGA,IAAM,kBAAkB,CAAC,EAAE,mBAAmB,YAAY,UAAU,OAAO,MAAa;AACtF,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAqB,CAAC,CAAC;AAE/C,8BAAU,MAAM;AACd,QAAI,WAAY,SAAQ,UAAU;AAAA,EACpC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,oBAAgB;AAAA,IACpB,MAAM,kBAAkB,OAAO,CAAC,MAAM,CAAC,EAAE,mBAAmB,EAAE,gBAAgB,IAAI,CAAC;AAAA,IACnF,CAAC,mBAAmB,IAAI;AAAA,EAC1B;AAEA,QAAM,EAAE,MAAM,OAAO,IAAI,cAAc,MAAM;AAE7C,QAAM,SAAS,eAAe,IAAI,IAAI;AAEtC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,mBAAmB,IAAI,EAAE;AAAA,EAC3C;AAEA,SACE,6CAAC,UAAO,QACL,wBAAc,IAAI,CAAC,MAClB;AAAA,IAAC;AAAA;AAAA,MAEC,kBAAkB;AAAA,MAClB,aAAa;AAAA,MACb,oBAAoB,CAAC,OAAO,QAAQ;AAClC,cAAM,OAAO,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM;AACrC,gBAAQ,IAAI;AACZ,mBAAW,IAAI;AAAA,MACjB;AAAA;AAAA,IAPK,EAAE;AAAA,EAQT,CACD,GACH;AAEJ;AAGA,IAAO,0BAAQ;;;AL9Cf,IAAAC,eAKO;AAlBP,iBAAiB;","names":["import_jsx_runtime","index_exports","__export","fieldRegistry","module","__toCommonJS","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_core"]}

package/dist/index.mjs

@@ -1,37 +1,74 @@
-// src/DynamicInput.tsx
-import { fieldRegistry } from "@dynamic-field-kit/core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var DynamicInput = ({
-  type,
-  value,
-  onChange,
-  label
-}) => {
-  const Renderer = fieldRegistry.get(type);
-  if (!Renderer) {
-    return /* @__PURE__ */ jsxs("div", { children: [
-      "Unknown field type: ",
-      type
-    ] });
+import {
+  __commonJS,
+  __toESM,
+  layoutRegistry
+} from "./chunk-HAKPX2A2.mjs";
+
+// ../core/dist/index.js
+var require_dist = __commonJS({
+  "../core/dist/index.js"(exports, module) {
+    "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);
+    var index_exports = {};
+    __export(index_exports, {
+      FieldRegistry: () => FieldRegistry,
+      fieldRegistry: () => fieldRegistry3
+    });
+    module.exports = __toCommonJS(index_exports);
+    var FieldRegistry = class {
+      constructor() {
+        this.registry = {};
+      }
+      // ✅ Type safety ở API
+      register(type, renderer) {
+        this.registry[type] = renderer;
+      }
+      get(type) {
+        return this.registry[type];
+      }
+    };
+    var fieldRegistry3 = new FieldRegistry();
   }
-  return /* @__PURE__ */ jsx(
-    Renderer,
-    {
-      value,
-      onValueChange: onChange,
-      label
-    }
-  );
+});
+
+// src/registerDefaults.ts
+async function registerDefaults() {
+  await import("./defaultLayouts-PVN6T4LH.mjs");
+  await import("./responsiveLayout-2KUYZQJ3.mjs");
+}
+
+// src/components/DynamicInput.tsx
+var import_core = __toESM(require_dist());
+import { jsx, jsxs } from "react/jsx-runtime";
+var DynamicInput = ({ type, value, onChange, label }) => {
+  const Renderer = import_core.fieldRegistry.get(type);
+  if (!Renderer) return /* @__PURE__ */ jsxs("div", { children: [
+    "Unknown field type: ",
+    type
+  ] });
+  return /* @__PURE__ */ jsx(Renderer, { value, onValueChange: onChange, label });
 };
 var DynamicInput_default = DynamicInput;
 
-// src/FieldInput.tsx
+// src/components/FieldInput.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var FieldInput = ({
-  fieldDescription,
-  renderInfos,
-  onValueChangeField
-}) => {
+var FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }) => {
   const { name, type, label } = fieldDescription;
   return /* @__PURE__ */ jsx2(
     DynamicInput_default,
@@ -45,25 +82,29 @@ var FieldInput = ({
 };
 var FieldInput_default = FieldInput;
 
-// src/MultiFieldInput.tsx
-import { Fragment, useEffect, useMemo, useState } from "react";
-import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
-var MultiFieldInput = ({
-  fieldDescriptions,
-  properties,
-  onChange
-}) => {
+// src/components/MultiFieldInput.tsx
+import { useEffect, useMemo, useState } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function resolveLayout(layout) {
+  if (!layout) return { type: "column", config: {} };
+  if (typeof layout === "string") return { type: layout, config: {} };
+  return { type: layout.type, config: layout };
+}
+var MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }) => {
   const [data, setData] = useState({});
   useEffect(() => {
     if (properties) setData(properties);
   }, [properties]);
   const visibleFields = useMemo(
-    () => fieldDescriptions.filter(
-      (f) => !f.appearCondition || f.appearCondition(data)
-    ),
+    () => fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(data)),
     [fieldDescriptions, data]
   );
-  return /* @__PURE__ */ jsx3(Fragment2, { children: visibleFields.map((f) => /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsx3(
+  const { type, config } = resolveLayout(layout);
+  const Layout = layoutRegistry.get(type);
+  if (!Layout) {
+    throw new Error(`Unknown layout: ${type}`);
+  }
+  return /* @__PURE__ */ jsx3(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ jsx3(
     FieldInput_default,
     {
       fieldDescription: f,
@@ -73,13 +114,21 @@ var MultiFieldInput = ({
         setData(next);
         onChange?.(next);
       }
-    }
-  ) }, f.name)) });
+    },
+    f.name
+  )) });
 };
 var MultiFieldInput_default = MultiFieldInput;
+
+// src/index.ts
+var import_core2 = __toESM(require_dist());
+registerDefaults();
+var export_fieldRegistry = import_core2.fieldRegistry;
 export {
   DynamicInput_default as DynamicInput,
   FieldInput_default as FieldInput,
-  MultiFieldInput_default as MultiFieldInput
+  MultiFieldInput_default as MultiFieldInput,
+  export_fieldRegistry as fieldRegistry,
+  layoutRegistry
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/DynamicInput.tsx","../src/FieldInput.tsx","../src/MultiFieldInput.tsx"],"sourcesContent":["import { fieldRegistry, FieldTypeKey } from \"@dynamic-field-kit/core\"\r\n\r\ninterface Props<T extends FieldTypeKey> {\r\n    type: T\r\n    value?: any\r\n    onChange?: (value: any) => void\r\n    label?: string\r\n}\r\n\r\nconst DynamicInput = <T extends FieldTypeKey>({\r\n    type,\r\n    value,\r\n    onChange,\r\n    label,\r\n}: Props<T>) => {\r\n    const Renderer = fieldRegistry.get(type)\r\n\r\n    if (!Renderer) {\r\n        return <div>Unknown field type: {type}</div>\r\n    }\r\n\r\n    return (\r\n        <Renderer\r\n            value={value}\r\n            onValueChange={onChange}\r\n            label={label}\r\n        />\r\n    )\r\n}\r\n\r\nexport default DynamicInput\r\n","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport DynamicInput from \"./DynamicInput\"\r\n\r\ninterface Props {\r\n  fieldDescription: FieldDescription\r\n  renderInfos: Properties\r\n  onValueChangeField: (value: any, key: string) => void\r\n}\r\n\r\nconst FieldInput = ({\r\n  fieldDescription,\r\n  renderInfos,\r\n  onValueChangeField,\r\n}: Props) => {\r\n  const { name, type, label } = fieldDescription\r\n\r\n  return (\r\n    <DynamicInput\r\n      type={type}\r\n      label={label}\r\n      value={renderInfos[name]}\r\n      onChange={(v) => onValueChangeField(v, name)}\r\n    />\r\n  )\r\n}\r\n\r\nexport default FieldInput\r\n","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport { Fragment, useEffect, useMemo, useState } from \"react\"\r\nimport FieldInput from \"./FieldInput\"\r\n\r\ninterface Props {\r\n  fieldDescriptions: FieldDescription[]\r\n  properties?: Properties\r\n  onChange?: (data: Properties) => void\r\n}\r\n\r\nconst MultiFieldInput = ({\r\n  fieldDescriptions,\r\n  properties,\r\n  onChange,\r\n}: Props) => {\r\n  const [data, setData] = useState<Properties>({})\r\n\r\n  useEffect(() => {\r\n    if (properties) setData(properties)\r\n  }, [properties])\r\n\r\n  const visibleFields = useMemo(\r\n    () =>\r\n      fieldDescriptions.filter(\r\n        (f) => !f.appearCondition || f.appearCondition(data)\r\n      ),\r\n    [fieldDescriptions, data]\r\n  )\r\n\r\n  return (\r\n    <>\r\n      {visibleFields.map((f) => (\r\n        <Fragment key={f.name}>\r\n          <FieldInput\r\n            fieldDescription={f}\r\n            renderInfos={data}\r\n            onValueChangeField={(value, key) => {\r\n              const next = { ...data, [key]: value }\r\n              setData(next)\r\n              onChange?.(next)\r\n            }}\r\n          />\r\n        </Fragment>\r\n      ))}\r\n    </>\r\n  )\r\n}\r\n\r\nexport default MultiFieldInput\r\n"],"mappings":";AAAA,SAAS,qBAAmC;AAkB7B,SAIP,KAJO;AATf,IAAM,eAAe,CAAyB;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAgB;AACZ,QAAM,WAAW,cAAc,IAAI,IAAI;AAEvC,MAAI,CAAC,UAAU;AACX,WAAO,qBAAC,SAAI;AAAA;AAAA,MAAqB;AAAA,OAAK;AAAA,EAC1C;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAe;AAAA,MACf;AAAA;AAAA,EACJ;AAER;AAEA,IAAO,uBAAQ;;;ACbX,gBAAAA,YAAA;AARJ,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,MAAa;AACX,QAAM,EAAE,MAAM,MAAM,MAAM,IAAI;AAE9B,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO,YAAY,IAAI;AAAA,MACvB,UAAU,CAAC,MAAM,mBAAmB,GAAG,IAAI;AAAA;AAAA,EAC7C;AAEJ;AAEA,IAAO,qBAAQ;;;ACzBf,SAAS,UAAU,WAAW,SAAS,gBAAgB;AA6BnD,qBAAAC,WAGM,OAAAC,YAHN;AApBJ,IAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAAa;AACX,QAAM,CAAC,MAAM,OAAO,IAAI,SAAqB,CAAC,CAAC;AAE/C,YAAU,MAAM;AACd,QAAI,WAAY,SAAQ,UAAU;AAAA,EACpC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,gBAAgB;AAAA,IACpB,MACE,kBAAkB;AAAA,MAChB,CAAC,MAAM,CAAC,EAAE,mBAAmB,EAAE,gBAAgB,IAAI;AAAA,IACrD;AAAA,IACF,CAAC,mBAAmB,IAAI;AAAA,EAC1B;AAEA,SACE,gBAAAA,KAAAD,WAAA,EACG,wBAAc,IAAI,CAAC,MAClB,gBAAAC,KAAC,YACC,0BAAAA;AAAA,IAAC;AAAA;AAAA,MACC,kBAAkB;AAAA,MAClB,aAAa;AAAA,MACb,oBAAoB,CAAC,OAAO,QAAQ;AAClC,cAAM,OAAO,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM;AACrC,gBAAQ,IAAI;AACZ,mBAAW,IAAI;AAAA,MACjB;AAAA;AAAA,EACF,KATa,EAAE,IAUjB,CACD,GACH;AAEJ;AAEA,IAAO,0BAAQ;","names":["jsx","Fragment","jsx"]}
+{"version":3,"sources":["../../core/src/index.ts","../../core/src/fieldRegistry.ts","../src/registerDefaults.ts","../src/components/DynamicInput.tsx","../src/components/FieldInput.tsx","../src/components/MultiFieldInput.tsx","../src/index.ts"],"sourcesContent":["export * from \"./types\"\r\nexport * from \"./fieldRegistry\"\r\n","import { JSX } from \"react\"\r\nimport type { FieldRendererProps, FieldTypeMap } from \"./types\"\r\n\r\nexport type FieldRenderer<T = any> = (props: FieldRendererProps<T>) => JSX.Element\r\n\r\nexport class FieldRegistry {\r\n    // ❗ INTERNAL = string, KHÔNG constrain\r\n    private registry: Record<string, FieldRenderer<any>> = {}\r\n\r\n    // ✅ Type safety ở API\r\n    register<K extends keyof FieldTypeMap>(\r\n        type: K,\r\n        renderer: FieldRenderer<FieldTypeMap[K]>\r\n    ) {\r\n        this.registry[type as string] = renderer\r\n    }\r\n\r\n    get<K extends keyof FieldTypeMap>(\r\n        type: K\r\n    ): FieldRenderer<FieldTypeMap[K]> | undefined {\r\n        return this.registry[type as string]\r\n    }\r\n}\r\n\r\nexport const fieldRegistry = new FieldRegistry()\r\n","export async function registerDefaults() {\r\n    await import(\"./layout/defaultLayouts\")\r\n    await import(\"./layout/responsiveLayout\")\r\n}\r\n","import { fieldRegistry, FieldTypeKey } from \"@dynamic-field-kit/core\"\r\n\r\ninterface Props<T extends FieldTypeKey> {\r\n    type: T\r\n    value?: any\r\n    onChange?: (value: any) => void\r\n    label?: string\r\n}\r\n\r\n\r\nconst DynamicInput = <T extends FieldTypeKey>({ type, value, onChange, label }: Props<T>) => {\r\n    const Renderer = fieldRegistry.get(type)\r\n\r\n\r\n    if (!Renderer) return <div>Unknown field type: {type}</div>\r\n\r\n\r\n    return <Renderer value={value} onValueChange={onChange} label={label} />\r\n}\r\n\r\n\r\nexport default DynamicInput","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport DynamicInput from \"./DynamicInput\"\r\n\r\ninterface Props {\r\n  fieldDescription: FieldDescription\r\n  renderInfos: Properties\r\n  onValueChangeField: (value: any, key: string) => void\r\n}\r\n\r\n\r\nconst FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }: Props) => {\r\n  const { name, type, label } = fieldDescription\r\n\r\n\r\n  return (\r\n    <DynamicInput\r\n      type={type}\r\n      label={label}\r\n      value={renderInfos[name]}\r\n      onChange={(v) => onValueChangeField(v, name)}\r\n    />\r\n  )\r\n}\r\n\r\n\r\nexport default FieldInput\r\n","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport { Fragment, useEffect, useMemo, useState } from \"react\"\r\nimport FieldInput from \"./FieldInput\"\r\nimport { layoutRegistry } from \"../layout\"\r\nimport { LayoutConfig } from \"../types/layout\"\r\n\r\n\r\ninterface Props {\r\n  fieldDescriptions: FieldDescription[]\r\n  properties?: Properties\r\n  onChange?: (data: Properties) => void\r\n  layout?: LayoutConfig\r\n}\r\n\r\n\r\nfunction resolveLayout(layout?: LayoutConfig) {\r\n  if (!layout) return { type: \"column\", config: {} }\r\n  if (typeof layout === \"string\") return { type: layout, config: {} }\r\n  return { type: layout.type, config: layout }\r\n}\r\n\r\n\r\nconst MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }: Props) => {\r\n  const [data, setData] = useState<Properties>({})\r\n\r\n  useEffect(() => {\r\n    if (properties) setData(properties)\r\n  }, [properties])\r\n\r\n  const visibleFields = useMemo(\r\n    () => fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(data)),\r\n    [fieldDescriptions, data]\r\n  )\r\n\r\n  const { type, config } = resolveLayout(layout)\r\n  \r\n  const Layout = layoutRegistry.get(type)\r\n\r\n  if (!Layout) {\r\n    throw new Error(`Unknown layout: ${type}`)\r\n  }\r\n\r\n  return (\r\n    <Layout config={config}>\r\n      {visibleFields.map((f) => (\r\n        <FieldInput\r\n          key={f.name}\r\n          fieldDescription={f}\r\n          renderInfos={data}\r\n          onValueChangeField={(value, key) => {\r\n            const next = { ...data, [key]: value }\r\n            setData(next)\r\n            onChange?.(next)\r\n          }}\r\n        />\r\n      ))}\r\n    </Layout>\r\n  )\r\n}\r\n\r\n\r\nexport default MultiFieldInput\r\n","import { registerDefaults } from \"./registerDefaults\"\r\n\r\nregisterDefaults()\r\n\r\n\r\nexport { layoutRegistry } from \"./layout\"\r\n\r\n\r\nexport { default as DynamicInput } from \"./components/DynamicInput\"\r\nexport { default as FieldInput } from \"./components/FieldInput\"\r\nexport { default as MultiFieldInput } from \"./components/MultiFieldInput\"\r\n\r\n\r\nexport type { LayoutConfig } from \"./types/layout\"\r\n// 🔁 Re-export từ core (CÙNG INSTANCE ĐÃ BUNDLE)\r\nexport {\r\n    fieldRegistry,\r\n    type FieldTypeKey,\r\n    type FieldDescription,\r\n    type FieldRendererProps,\r\n} from \"@dynamic-field-kit/core\"\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,QAAA,gBAAA,CAAA;AAAA,aAAA,eAAA;MAAA,eAAA,MAAA;MAAA,eAAA,MAAAA;IAAA,CAAA;AAAA,WAAA,UAAA,aAAA,aAAA;ACKO,QAAM,gBAAN,MAAoB;MAApB,cAAA;AAEH,aAAQ,WAA+C,CAAC;MAAA;;MAGxD,SACI,MACA,UACF;AACE,aAAK,SAAS,IAAc,IAAI;MACpC;MAEA,IACI,MAC0C;AAC1C,eAAO,KAAK,SAAS,IAAc;MACvC;IACJ;AAEO,QAAMA,iBAAgB,IAAI,cAAc;;;;;ACxB/C,eAAsB,mBAAmB;AACrC,QAAM,OAAO,+BAAyB;AACtC,QAAM,OAAO,iCAA2B;AAC5C;;;ACHA,kBAA4C;AAclB,SAGf,KAHe;AAJ1B,IAAM,eAAe,CAAyB,EAAE,MAAM,OAAO,UAAU,MAAM,MAAgB;AACzF,QAAM,WAAW,0BAAc,IAAI,IAAI;AAGvC,MAAI,CAAC,SAAU,QAAO,qBAAC,SAAI;AAAA;AAAA,IAAqB;AAAA,KAAK;AAGrD,SAAO,oBAAC,YAAS,OAAc,eAAe,UAAU,OAAc;AAC1E;AAGA,IAAO,uBAAQ;;;ACNX,gBAAAC,YAAA;AALJ,IAAM,aAAa,CAAC,EAAE,kBAAkB,aAAa,mBAAmB,MAAa;AACnF,QAAM,EAAE,MAAM,MAAM,MAAM,IAAI;AAG9B,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO,YAAY,IAAI;AAAA,MACvB,UAAU,CAAC,MAAM,mBAAmB,GAAG,IAAI;AAAA;AAAA,EAC7C;AAEJ;AAGA,IAAO,qBAAQ;;;ACxBf,SAAmB,WAAW,SAAS,gBAAgB;AA4C/C,gBAAAC,YAAA;AA9BR,SAAS,cAAc,QAAuB;AAC5C,MAAI,CAAC,OAAQ,QAAO,EAAE,MAAM,UAAU,QAAQ,CAAC,EAAE;AACjD,MAAI,OAAO,WAAW,SAAU,QAAO,EAAE,MAAM,QAAQ,QAAQ,CAAC,EAAE;AAClE,SAAO,EAAE,MAAM,OAAO,MAAM,QAAQ,OAAO;AAC7C;AAGA,IAAM,kBAAkB,CAAC,EAAE,mBAAmB,YAAY,UAAU,OAAO,MAAa;AACtF,QAAM,CAAC,MAAM,OAAO,IAAI,SAAqB,CAAC,CAAC;AAE/C,YAAU,MAAM;AACd,QAAI,WAAY,SAAQ,UAAU;AAAA,EACpC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,gBAAgB;AAAA,IACpB,MAAM,kBAAkB,OAAO,CAAC,MAAM,CAAC,EAAE,mBAAmB,EAAE,gBAAgB,IAAI,CAAC;AAAA,IACnF,CAAC,mBAAmB,IAAI;AAAA,EAC1B;AAEA,QAAM,EAAE,MAAM,OAAO,IAAI,cAAc,MAAM;AAE7C,QAAM,SAAS,eAAe,IAAI,IAAI;AAEtC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,mBAAmB,IAAI,EAAE;AAAA,EAC3C;AAEA,SACE,gBAAAA,KAAC,UAAO,QACL,wBAAc,IAAI,CAAC,MAClB,gBAAAA;AAAA,IAAC;AAAA;AAAA,MAEC,kBAAkB;AAAA,MAClB,aAAa;AAAA,MACb,oBAAoB,CAAC,OAAO,QAAQ;AAClC,cAAM,OAAO,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM;AACrC,gBAAQ,IAAI;AACZ,mBAAW,IAAI;AAAA,MACjB;AAAA;AAAA,IAPK,EAAE;AAAA,EAQT,CACD,GACH;AAEJ;AAGA,IAAO,0BAAQ;;;AC9Cf,IAAAC,eAKO;AAlBP,iBAAiB;","names":["fieldRegistry","jsx","jsx","import_core"]}

package/dist/responsiveLayout-2KUYZQJ3.mjs

@@ -0,0 +1,28 @@
+import {
+  layoutRegistry
+} from "./chunk-HAKPX2A2.mjs";
+
+// src/layout/responsiveLayout.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function resolve(layout) {
+  if (typeof layout === "string") {
+    return { type: layout, config: {} };
+  }
+  return { type: layout.type, config: layout };
+}
+layoutRegistry.register("responsive", ({ children, config }) => {
+  const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
+  const current = isMobile ? config.mobile : config.desktop;
+  if (!current) return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    " "
+  ] });
+  const { type, config: childConfig } = resolve(current);
+  const Renderer = layoutRegistry.get(type);
+  if (!Renderer) return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    " "
+  ] });
+  return /* @__PURE__ */ jsx(Renderer, { config: childConfig, children });
+});
+//# sourceMappingURL=responsiveLayout-2KUYZQJ3.mjs.map

package/dist/responsiveLayout-2KUYZQJ3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/layout/responsiveLayout.tsx"],"sourcesContent":["import { layoutRegistry } from \"./layoutRegistry\"\r\nimport { LayoutConfig } from \"../types/layout\"\r\n\r\nfunction resolve(layout: LayoutConfig) {\r\n    if (typeof layout === \"string\") {\r\n        return { type: layout, config: {} }\r\n    }\r\n    return { type: layout.type, config: layout }\r\n}\r\n\r\nlayoutRegistry.register(\"responsive\", ({ children, config }) => {\r\n    const isMobile =\r\n        typeof window !== \"undefined\" && window.innerWidth < 768\r\n\r\n    const current = isMobile ? config.mobile : config.desktop\r\n    if (!current) return <>{ children } </>\r\n\r\n    const { type, config: childConfig } = resolve(current)\r\n    const Renderer = layoutRegistry.get(type)\r\n\r\n    if (!Renderer) return <>{ children } </>\r\n\r\n    return (\r\n        <Renderer config= { childConfig } >\r\n        { children }\r\n        </Renderer>\r\n    )\r\n})\r\n"],"mappings":";;;;;AAeyB,mBAQjB,KARiB;AAZzB,SAAS,QAAQ,QAAsB;AACnC,MAAI,OAAO,WAAW,UAAU;AAC5B,WAAO,EAAE,MAAM,QAAQ,QAAQ,CAAC,EAAE;AAAA,EACtC;AACA,SAAO,EAAE,MAAM,OAAO,MAAM,QAAQ,OAAO;AAC/C;AAEA,eAAe,SAAS,cAAc,CAAC,EAAE,UAAU,OAAO,MAAM;AAC5D,QAAM,WACF,OAAO,WAAW,eAAe,OAAO,aAAa;AAEzD,QAAM,UAAU,WAAW,OAAO,SAAS,OAAO;AAClD,MAAI,CAAC,QAAS,QAAO,iCAAI;AAAA;AAAA,IAAU;AAAA,KAAC;AAEpC,QAAM,EAAE,MAAM,QAAQ,YAAY,IAAI,QAAQ,OAAO;AACrD,QAAM,WAAW,eAAe,IAAI,IAAI;AAExC,MAAI,CAAC,SAAU,QAAO,iCAAI;AAAA;AAAA,IAAU;AAAA,KAAC;AAErC,SACI,oBAAC,YAAS,QAAU,aAClB,UACF;AAER,CAAC;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dynamic-field-kit/react",
-    "version": "1.0.3",
+    "version": "1.0.5",
     "description": "React renderer for dynamic-field-kit",
     "license": "MIT",
     "main": "dist/index.cjs",
@@ -10,9 +10,6 @@
     "files": [
         "dist"
     ],
-    "peerDependencies": {
-        "react": ">=17"
-    },
     "dependencies": {
         "@dynamic-field-kit/core": "^1.0.3"
     },