@dynamic-field-kit/react 1.0.4 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -130,7 +130,7 @@ The library does **not** ship UI components.
130
130
  Instead, applications register their own renderers.
131
131
 
132
132
  ```ts
133
- import { fieldRegistry } from "@dynamic-field-kit/core"
133
+ import { fieldRegistry } from "@dynamic-field-kit/react"
134
134
 
135
135
  fieldRegistry.register("text", ({ value, onValueChange, label }) => (
136
136
  <div>
@@ -202,7 +202,7 @@ You **do not** need to modify the library.
202
202
  Just extend `FieldTypeMap`:
203
203
 
204
204
  ```ts
205
- declare module "@dynamic-field-kit/react" {
205
+ declare module "@dynamic-field-kit/core" {
206
206
  interface FieldTypeMap {
207
207
  date: Date
208
208
  }
@@ -296,4 +296,4 @@ This library intentionally does not include:
296
296
  It is a **form engine**, not a full form framework.
297
297
 
298
298
  ## 📄 License
299
- MIT © vannt-dev
299
+ MIT © [vannt-dev](https://github.com/vannt-dev)
@@ -0,0 +1,49 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __commonJS = (cb, mod) => function __require() {
8
+ return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
19
+ // If the importer is in node compatibility mode or this is not an ESM
20
+ // file that has been converted to a CommonJS file using a Babel-
21
+ // compatible transform (i.e. "__esModule" has not been set), then set
22
+ // "default" to the CommonJS "module.exports" for node compatibility.
23
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
24
+ mod
25
+ ));
26
+
27
+ // src/layout/layoutRegistry.ts
28
+ var LayoutRegistry = class {
29
+ constructor() {
30
+ this.layouts = /* @__PURE__ */ new Map();
31
+ }
32
+ register(type, renderer) {
33
+ if (this.layouts.has(type)) {
34
+ console.warn(`[dynamic-field-kit] Layout "${type}" already exists`);
35
+ }
36
+ this.layouts.set(type, renderer);
37
+ }
38
+ get(type) {
39
+ return this.layouts.get(type);
40
+ }
41
+ };
42
+ var layoutRegistry = new LayoutRegistry();
43
+
44
+ export {
45
+ __commonJS,
46
+ __toESM,
47
+ layoutRegistry
48
+ };
49
+ //# sourceMappingURL=chunk-HAKPX2A2.mjs.map
@@ -0,0 +1 @@
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":[]}
@@ -0,0 +1,40 @@
1
+ import {
2
+ layoutRegistry
3
+ } from "./chunk-HAKPX2A2.mjs";
4
+
5
+ // src/layout/defaultLayouts.tsx
6
+ import { jsx } from "react/jsx-runtime";
7
+ layoutRegistry.register("column", ({ children, config }) => /* @__PURE__ */ jsx(
8
+ "div",
9
+ {
10
+ style: {
11
+ display: "flex",
12
+ flexDirection: "column",
13
+ gap: config?.gap ?? 12
14
+ },
15
+ children
16
+ }
17
+ ));
18
+ layoutRegistry.register("row", ({ children, config }) => /* @__PURE__ */ jsx(
19
+ "div",
20
+ {
21
+ style: {
22
+ display: "flex",
23
+ flexDirection: "row",
24
+ gap: config?.gap ?? 12
25
+ },
26
+ children
27
+ }
28
+ ));
29
+ layoutRegistry.register("grid", ({ children, config }) => /* @__PURE__ */ jsx(
30
+ "div",
31
+ {
32
+ style: {
33
+ display: "grid",
34
+ gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,
35
+ gap: config?.gap ?? 12
36
+ },
37
+ children
38
+ }
39
+ ));
40
+ //# sourceMappingURL=defaultLayouts-PVN6T4LH.mjs.map
@@ -0,0 +1 @@
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 CHANGED
@@ -1,30 +1,51 @@
1
+ import React from 'react';
1
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { FieldTypeKey as FieldTypeKey$1, FieldDescription, Properties } from '@dynamic-field-kit/core';
3
+ import { FieldTypeKey, FieldDescription, Properties } from '@dynamic-field-kit/core';
4
+ export { FieldDescription, FieldRendererProps, FieldTypeKey, fieldRegistry } from '@dynamic-field-kit/core';
3
5
 
4
- interface FieldTypeMap {
6
+ type LayoutRenderer<C = any> = (props: {
7
+ children: React.ReactNode;
8
+ config?: C;
9
+ }) => React.ReactElement;
10
+ declare class LayoutRegistry {
11
+ private layouts;
12
+ register(type: string, renderer: LayoutRenderer): void;
13
+ get(type: string): LayoutRenderer | undefined;
5
14
  }
6
- type FieldTypeKey = keyof FieldTypeMap | string;
15
+ declare const layoutRegistry: LayoutRegistry;
7
16
 
8
- interface Props$2<T extends FieldTypeKey$1> {
17
+ type BaseLayout = "column" | "row" | {
18
+ type: "grid";
19
+ columns?: number;
20
+ gap?: number;
21
+ };
22
+ type LayoutConfig = BaseLayout | {
23
+ type: "responsive";
24
+ mobile: BaseLayout;
25
+ desktop: BaseLayout;
26
+ };
27
+
28
+ interface Props$2<T extends FieldTypeKey> {
9
29
  type: T;
10
30
  value?: any;
11
31
  onChange?: (value: any) => void;
12
32
  label?: string;
13
33
  }
14
- declare const DynamicInput: <T extends FieldTypeKey$1>({ type, value, onChange, label, }: Props$2<T>) => react_jsx_runtime.JSX.Element;
34
+ declare const DynamicInput: <T extends FieldTypeKey>({ type, value, onChange, label }: Props$2<T>) => react_jsx_runtime.JSX.Element;
15
35
 
16
36
  interface Props$1 {
17
37
  fieldDescription: FieldDescription;
18
38
  renderInfos: Properties;
19
39
  onValueChangeField: (value: any, key: string) => void;
20
40
  }
21
- declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField, }: Props$1) => react_jsx_runtime.JSX.Element;
41
+ declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField }: Props$1) => react_jsx_runtime.JSX.Element;
22
42
 
23
43
  interface Props {
24
44
  fieldDescriptions: FieldDescription[];
25
45
  properties?: Properties;
26
46
  onChange?: (data: Properties) => void;
47
+ layout?: LayoutConfig;
27
48
  }
28
- declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, }: Props) => react_jsx_runtime.JSX.Element;
49
+ declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout }: Props) => react_jsx_runtime.JSX.Element;
29
50
 
30
- export { DynamicInput, FieldInput, type FieldTypeKey, type FieldTypeMap, MultiFieldInput };
51
+ export { DynamicInput, FieldInput, type LayoutConfig, MultiFieldInput, layoutRegistry };
package/dist/index.d.ts CHANGED
@@ -1,30 +1,51 @@
1
+ import React from 'react';
1
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { FieldTypeKey as FieldTypeKey$1, FieldDescription, Properties } from '@dynamic-field-kit/core';
3
+ import { FieldTypeKey, FieldDescription, Properties } from '@dynamic-field-kit/core';
4
+ export { FieldDescription, FieldRendererProps, FieldTypeKey, fieldRegistry } from '@dynamic-field-kit/core';
3
5
 
4
- interface FieldTypeMap {
6
+ type LayoutRenderer<C = any> = (props: {
7
+ children: React.ReactNode;
8
+ config?: C;
9
+ }) => React.ReactElement;
10
+ declare class LayoutRegistry {
11
+ private layouts;
12
+ register(type: string, renderer: LayoutRenderer): void;
13
+ get(type: string): LayoutRenderer | undefined;
5
14
  }
6
- type FieldTypeKey = keyof FieldTypeMap | string;
15
+ declare const layoutRegistry: LayoutRegistry;
7
16
 
8
- interface Props$2<T extends FieldTypeKey$1> {
17
+ type BaseLayout = "column" | "row" | {
18
+ type: "grid";
19
+ columns?: number;
20
+ gap?: number;
21
+ };
22
+ type LayoutConfig = BaseLayout | {
23
+ type: "responsive";
24
+ mobile: BaseLayout;
25
+ desktop: BaseLayout;
26
+ };
27
+
28
+ interface Props$2<T extends FieldTypeKey> {
9
29
  type: T;
10
30
  value?: any;
11
31
  onChange?: (value: any) => void;
12
32
  label?: string;
13
33
  }
14
- declare const DynamicInput: <T extends FieldTypeKey$1>({ type, value, onChange, label, }: Props$2<T>) => react_jsx_runtime.JSX.Element;
34
+ declare const DynamicInput: <T extends FieldTypeKey>({ type, value, onChange, label }: Props$2<T>) => react_jsx_runtime.JSX.Element;
15
35
 
16
36
  interface Props$1 {
17
37
  fieldDescription: FieldDescription;
18
38
  renderInfos: Properties;
19
39
  onValueChangeField: (value: any, key: string) => void;
20
40
  }
21
- declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField, }: Props$1) => react_jsx_runtime.JSX.Element;
41
+ declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField }: Props$1) => react_jsx_runtime.JSX.Element;
22
42
 
23
43
  interface Props {
24
44
  fieldDescriptions: FieldDescription[];
25
45
  properties?: Properties;
26
46
  onChange?: (data: Properties) => void;
47
+ layout?: LayoutConfig;
27
48
  }
28
- declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, }: Props) => react_jsx_runtime.JSX.Element;
49
+ declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout }: Props) => react_jsx_runtime.JSX.Element;
29
50
 
30
- export { DynamicInput, FieldInput, type FieldTypeKey, type FieldTypeMap, MultiFieldInput };
51
+ export { DynamicInput, FieldInput, type LayoutConfig, MultiFieldInput, layoutRegistry };
package/dist/index.js CHANGED
@@ -5,6 +5,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
6
6
  var __getProtoOf = Object.getPrototypeOf;
7
7
  var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __esm = (fn, res) => function __init() {
9
+ return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
10
+ };
8
11
  var __commonJS = (cb, mod) => function __require() {
9
12
  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
10
13
  };
@@ -30,6 +33,105 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
30
33
  ));
31
34
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
32
35
 
36
+ // src/layout/layoutRegistry.ts
37
+ var LayoutRegistry, layoutRegistry;
38
+ var init_layoutRegistry = __esm({
39
+ "src/layout/layoutRegistry.ts"() {
40
+ "use strict";
41
+ LayoutRegistry = class {
42
+ constructor() {
43
+ this.layouts = /* @__PURE__ */ new Map();
44
+ }
45
+ register(type, renderer) {
46
+ if (this.layouts.has(type)) {
47
+ console.warn(`[dynamic-field-kit] Layout "${type}" already exists`);
48
+ }
49
+ this.layouts.set(type, renderer);
50
+ }
51
+ get(type) {
52
+ return this.layouts.get(type);
53
+ }
54
+ };
55
+ layoutRegistry = new LayoutRegistry();
56
+ }
57
+ });
58
+
59
+ // src/layout/defaultLayouts.tsx
60
+ var defaultLayouts_exports = {};
61
+ var import_jsx_runtime;
62
+ var init_defaultLayouts = __esm({
63
+ "src/layout/defaultLayouts.tsx"() {
64
+ "use strict";
65
+ init_layoutRegistry();
66
+ import_jsx_runtime = require("react/jsx-runtime");
67
+ layoutRegistry.register("column", ({ children, config }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
68
+ "div",
69
+ {
70
+ style: {
71
+ display: "flex",
72
+ flexDirection: "column",
73
+ gap: config?.gap ?? 12
74
+ },
75
+ children
76
+ }
77
+ ));
78
+ layoutRegistry.register("row", ({ children, config }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
79
+ "div",
80
+ {
81
+ style: {
82
+ display: "flex",
83
+ flexDirection: "row",
84
+ gap: config?.gap ?? 12
85
+ },
86
+ children
87
+ }
88
+ ));
89
+ layoutRegistry.register("grid", ({ children, config }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
90
+ "div",
91
+ {
92
+ style: {
93
+ display: "grid",
94
+ gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,
95
+ gap: config?.gap ?? 12
96
+ },
97
+ children
98
+ }
99
+ ));
100
+ }
101
+ });
102
+
103
+ // src/layout/responsiveLayout.tsx
104
+ var responsiveLayout_exports = {};
105
+ function resolve(layout) {
106
+ if (typeof layout === "string") {
107
+ return { type: layout, config: {} };
108
+ }
109
+ return { type: layout.type, config: layout };
110
+ }
111
+ var import_jsx_runtime2;
112
+ var init_responsiveLayout = __esm({
113
+ "src/layout/responsiveLayout.tsx"() {
114
+ "use strict";
115
+ init_layoutRegistry();
116
+ import_jsx_runtime2 = require("react/jsx-runtime");
117
+ layoutRegistry.register("responsive", ({ children, config }) => {
118
+ const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
119
+ const current = isMobile ? config.mobile : config.desktop;
120
+ if (!current) return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
121
+ children,
122
+ " "
123
+ ] });
124
+ const { type, config: childConfig } = resolve(current);
125
+ const Renderer = layoutRegistry.get(type);
126
+ if (!Renderer) return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
127
+ children,
128
+ " "
129
+ ] });
130
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Renderer, { config: childConfig, children });
131
+ });
132
+ }
133
+ });
134
+
33
135
  // ../core/dist/index.js
34
136
  var require_dist = __commonJS({
35
137
  "../core/dist/index.js"(exports2, module2) {
@@ -54,7 +156,7 @@ var require_dist = __commonJS({
54
156
  var index_exports2 = {};
55
157
  __export2(index_exports2, {
56
158
  FieldRegistry: () => FieldRegistry,
57
- fieldRegistry: () => fieldRegistry2
159
+ fieldRegistry: () => fieldRegistry3
58
160
  });
59
161
  module2.exports = __toCommonJS2(index_exports2);
60
162
  var FieldRegistry = class {
@@ -69,7 +171,7 @@ var require_dist = __commonJS({
69
171
  return this.registry[type];
70
172
  }
71
173
  };
72
- var fieldRegistry2 = new FieldRegistry();
174
+ var fieldRegistry3 = new FieldRegistry();
73
175
  }
74
176
  });
75
177
 
@@ -78,46 +180,39 @@ var index_exports = {};
78
180
  __export(index_exports, {
79
181
  DynamicInput: () => DynamicInput_default,
80
182
  FieldInput: () => FieldInput_default,
81
- MultiFieldInput: () => MultiFieldInput_default
183
+ MultiFieldInput: () => MultiFieldInput_default,
184
+ fieldRegistry: () => import_core2.fieldRegistry,
185
+ layoutRegistry: () => layoutRegistry
82
186
  });
83
187
  module.exports = __toCommonJS(index_exports);
84
188
 
85
- // src/DynamicInput.tsx
189
+ // src/registerDefaults.ts
190
+ async function registerDefaults() {
191
+ await Promise.resolve().then(() => (init_defaultLayouts(), defaultLayouts_exports));
192
+ await Promise.resolve().then(() => (init_responsiveLayout(), responsiveLayout_exports));
193
+ }
194
+
195
+ // src/layout/index.ts
196
+ init_layoutRegistry();
197
+
198
+ // src/components/DynamicInput.tsx
86
199
  var import_core = __toESM(require_dist());
87
- var import_jsx_runtime = require("react/jsx-runtime");
88
- var DynamicInput = ({
89
- type,
90
- value,
91
- onChange,
92
- label
93
- }) => {
200
+ var import_jsx_runtime3 = require("react/jsx-runtime");
201
+ var DynamicInput = ({ type, value, onChange, label }) => {
94
202
  const Renderer = import_core.fieldRegistry.get(type);
95
- if (!Renderer) {
96
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
97
- "Unknown field type: ",
98
- type
99
- ] });
100
- }
101
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
102
- Renderer,
103
- {
104
- value,
105
- onValueChange: onChange,
106
- label
107
- }
108
- );
203
+ if (!Renderer) return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
204
+ "Unknown field type: ",
205
+ type
206
+ ] });
207
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Renderer, { value, onValueChange: onChange, label });
109
208
  };
110
209
  var DynamicInput_default = DynamicInput;
111
210
 
112
- // src/FieldInput.tsx
113
- var import_jsx_runtime2 = require("react/jsx-runtime");
114
- var FieldInput = ({
115
- fieldDescription,
116
- renderInfos,
117
- onValueChangeField
118
- }) => {
211
+ // src/components/FieldInput.tsx
212
+ var import_jsx_runtime4 = require("react/jsx-runtime");
213
+ var FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }) => {
119
214
  const { name, type, label } = fieldDescription;
120
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
215
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
121
216
  DynamicInput_default,
122
217
  {
123
218
  type,
@@ -129,25 +224,29 @@ var FieldInput = ({
129
224
  };
130
225
  var FieldInput_default = FieldInput;
131
226
 
132
- // src/MultiFieldInput.tsx
227
+ // src/components/MultiFieldInput.tsx
133
228
  var import_react = require("react");
134
- var import_jsx_runtime3 = require("react/jsx-runtime");
135
- var MultiFieldInput = ({
136
- fieldDescriptions,
137
- properties,
138
- onChange
139
- }) => {
229
+ var import_jsx_runtime5 = require("react/jsx-runtime");
230
+ function resolveLayout(layout) {
231
+ if (!layout) return { type: "column", config: {} };
232
+ if (typeof layout === "string") return { type: layout, config: {} };
233
+ return { type: layout.type, config: layout };
234
+ }
235
+ var MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }) => {
140
236
  const [data, setData] = (0, import_react.useState)({});
141
237
  (0, import_react.useEffect)(() => {
142
238
  if (properties) setData(properties);
143
239
  }, [properties]);
144
240
  const visibleFields = (0, import_react.useMemo)(
145
- () => fieldDescriptions.filter(
146
- (f) => !f.appearCondition || f.appearCondition(data)
147
- ),
241
+ () => fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(data)),
148
242
  [fieldDescriptions, data]
149
243
  );
150
- 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)(
244
+ const { type, config } = resolveLayout(layout);
245
+ const Layout = layoutRegistry.get(type);
246
+ if (!Layout) {
247
+ throw new Error(`Unknown layout: ${type}`);
248
+ }
249
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
151
250
  FieldInput_default,
152
251
  {
153
252
  fieldDescription: f,
@@ -157,14 +256,21 @@ var MultiFieldInput = ({
157
256
  setData(next);
158
257
  onChange?.(next);
159
258
  }
160
- }
161
- ) }, f.name)) });
259
+ },
260
+ f.name
261
+ )) });
162
262
  };
163
263
  var MultiFieldInput_default = MultiFieldInput;
264
+
265
+ // src/index.ts
266
+ var import_core2 = __toESM(require_dist());
267
+ registerDefaults();
164
268
  // Annotate the CommonJS export names for ESM import in node:
165
269
  0 && (module.exports = {
166
270
  DynamicInput,
167
271
  FieldInput,
168
- MultiFieldInput
272
+ MultiFieldInput,
273
+ fieldRegistry,
274
+ layoutRegistry
169
275
  });
170
276
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../core/src/index.ts","../../core/src/fieldRegistry.ts","../src/index.ts","../src/DynamicInput.tsx","../src/FieldInput.tsx","../src/MultiFieldInput.tsx"],"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 * 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,QAAAA,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;;;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,IAAAG,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":["index_exports","__export","fieldRegistry","module","__toCommonJS","import_jsx_runtime","import_jsx_runtime"]}
1
+ {"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":"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","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 CHANGED
@@ -1,54 +1,34 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __commonJS = (cb, mod) => function __require() {
8
- return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
19
- // If the importer is in node compatibility mode or this is not an ESM
20
- // file that has been converted to a CommonJS file using a Babel-
21
- // compatible transform (i.e. "__esModule" has not been set), then set
22
- // "default" to the CommonJS "module.exports" for node compatibility.
23
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
24
- mod
25
- ));
1
+ import {
2
+ __commonJS,
3
+ __toESM,
4
+ layoutRegistry
5
+ } from "./chunk-HAKPX2A2.mjs";
26
6
 
27
7
  // ../core/dist/index.js
28
8
  var require_dist = __commonJS({
29
9
  "../core/dist/index.js"(exports, module) {
30
10
  "use strict";
31
- var __defProp2 = Object.defineProperty;
32
- var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
33
- var __getOwnPropNames2 = Object.getOwnPropertyNames;
34
- var __hasOwnProp2 = Object.prototype.hasOwnProperty;
11
+ var __defProp = Object.defineProperty;
12
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
13
+ var __getOwnPropNames = Object.getOwnPropertyNames;
14
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
35
15
  var __export = (target, all) => {
36
16
  for (var name in all)
37
- __defProp2(target, name, { get: all[name], enumerable: true });
17
+ __defProp(target, name, { get: all[name], enumerable: true });
38
18
  };
39
- var __copyProps2 = (to, from, except, desc) => {
19
+ var __copyProps = (to, from, except, desc) => {
40
20
  if (from && typeof from === "object" || typeof from === "function") {
41
- for (let key of __getOwnPropNames2(from))
42
- if (!__hasOwnProp2.call(to, key) && key !== except)
43
- __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
21
+ for (let key of __getOwnPropNames(from))
22
+ if (!__hasOwnProp.call(to, key) && key !== except)
23
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
44
24
  }
45
25
  return to;
46
26
  };
47
- var __toCommonJS = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
27
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
48
28
  var index_exports = {};
49
29
  __export(index_exports, {
50
30
  FieldRegistry: () => FieldRegistry,
51
- fieldRegistry: () => fieldRegistry2
31
+ fieldRegistry: () => fieldRegistry3
52
32
  });
53
33
  module.exports = __toCommonJS(index_exports);
54
34
  var FieldRegistry = class {
@@ -63,44 +43,32 @@ var require_dist = __commonJS({
63
43
  return this.registry[type];
64
44
  }
65
45
  };
66
- var fieldRegistry2 = new FieldRegistry();
46
+ var fieldRegistry3 = new FieldRegistry();
67
47
  }
68
48
  });
69
49
 
70
- // src/DynamicInput.tsx
50
+ // src/registerDefaults.ts
51
+ async function registerDefaults() {
52
+ await import("./defaultLayouts-PVN6T4LH.mjs");
53
+ await import("./responsiveLayout-2KUYZQJ3.mjs");
54
+ }
55
+
56
+ // src/components/DynamicInput.tsx
71
57
  var import_core = __toESM(require_dist());
72
58
  import { jsx, jsxs } from "react/jsx-runtime";
73
- var DynamicInput = ({
74
- type,
75
- value,
76
- onChange,
77
- label
78
- }) => {
59
+ var DynamicInput = ({ type, value, onChange, label }) => {
79
60
  const Renderer = import_core.fieldRegistry.get(type);
80
- if (!Renderer) {
81
- return /* @__PURE__ */ jsxs("div", { children: [
82
- "Unknown field type: ",
83
- type
84
- ] });
85
- }
86
- return /* @__PURE__ */ jsx(
87
- Renderer,
88
- {
89
- value,
90
- onValueChange: onChange,
91
- label
92
- }
93
- );
61
+ if (!Renderer) return /* @__PURE__ */ jsxs("div", { children: [
62
+ "Unknown field type: ",
63
+ type
64
+ ] });
65
+ return /* @__PURE__ */ jsx(Renderer, { value, onValueChange: onChange, label });
94
66
  };
95
67
  var DynamicInput_default = DynamicInput;
96
68
 
97
- // src/FieldInput.tsx
69
+ // src/components/FieldInput.tsx
98
70
  import { jsx as jsx2 } from "react/jsx-runtime";
99
- var FieldInput = ({
100
- fieldDescription,
101
- renderInfos,
102
- onValueChangeField
103
- }) => {
71
+ var FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }) => {
104
72
  const { name, type, label } = fieldDescription;
105
73
  return /* @__PURE__ */ jsx2(
106
74
  DynamicInput_default,
@@ -114,25 +82,29 @@ var FieldInput = ({
114
82
  };
115
83
  var FieldInput_default = FieldInput;
116
84
 
117
- // src/MultiFieldInput.tsx
118
- import { Fragment, useEffect, useMemo, useState } from "react";
119
- import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
120
- var MultiFieldInput = ({
121
- fieldDescriptions,
122
- properties,
123
- onChange
124
- }) => {
85
+ // src/components/MultiFieldInput.tsx
86
+ import { useEffect, useMemo, useState } from "react";
87
+ import { jsx as jsx3 } from "react/jsx-runtime";
88
+ function resolveLayout(layout) {
89
+ if (!layout) return { type: "column", config: {} };
90
+ if (typeof layout === "string") return { type: layout, config: {} };
91
+ return { type: layout.type, config: layout };
92
+ }
93
+ var MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }) => {
125
94
  const [data, setData] = useState({});
126
95
  useEffect(() => {
127
96
  if (properties) setData(properties);
128
97
  }, [properties]);
129
98
  const visibleFields = useMemo(
130
- () => fieldDescriptions.filter(
131
- (f) => !f.appearCondition || f.appearCondition(data)
132
- ),
99
+ () => fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(data)),
133
100
  [fieldDescriptions, data]
134
101
  );
135
- return /* @__PURE__ */ jsx3(Fragment2, { children: visibleFields.map((f) => /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsx3(
102
+ const { type, config } = resolveLayout(layout);
103
+ const Layout = layoutRegistry.get(type);
104
+ if (!Layout) {
105
+ throw new Error(`Unknown layout: ${type}`);
106
+ }
107
+ return /* @__PURE__ */ jsx3(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ jsx3(
136
108
  FieldInput_default,
137
109
  {
138
110
  fieldDescription: f,
@@ -142,13 +114,21 @@ var MultiFieldInput = ({
142
114
  setData(next);
143
115
  onChange?.(next);
144
116
  }
145
- }
146
- ) }, f.name)) });
117
+ },
118
+ f.name
119
+ )) });
147
120
  };
148
121
  var MultiFieldInput_default = MultiFieldInput;
122
+
123
+ // src/index.ts
124
+ var import_core2 = __toESM(require_dist());
125
+ registerDefaults();
126
+ var export_fieldRegistry = import_core2.fieldRegistry;
149
127
  export {
150
128
  DynamicInput_default as DynamicInput,
151
129
  FieldInput_default as FieldInput,
152
- MultiFieldInput_default as MultiFieldInput
130
+ MultiFieldInput_default as MultiFieldInput,
131
+ export_fieldRegistry as fieldRegistry,
132
+ layoutRegistry
153
133
  };
154
134
  //# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../core/src/index.ts","../../core/src/fieldRegistry.ts","../src/DynamicInput.tsx","../src/FieldInput.tsx","../src/MultiFieldInput.tsx"],"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","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,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,kBAA4C;AAkB7B,SAIP,KAJO;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,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,gBAAAC,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":["fieldRegistry","jsx","Fragment","jsx"]}
1
+ {"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"]}
@@ -0,0 +1,28 @@
1
+ import {
2
+ layoutRegistry
3
+ } from "./chunk-HAKPX2A2.mjs";
4
+
5
+ // src/layout/responsiveLayout.tsx
6
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
7
+ function resolve(layout) {
8
+ if (typeof layout === "string") {
9
+ return { type: layout, config: {} };
10
+ }
11
+ return { type: layout.type, config: layout };
12
+ }
13
+ layoutRegistry.register("responsive", ({ children, config }) => {
14
+ const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
15
+ const current = isMobile ? config.mobile : config.desktop;
16
+ if (!current) return /* @__PURE__ */ jsxs(Fragment, { children: [
17
+ children,
18
+ " "
19
+ ] });
20
+ const { type, config: childConfig } = resolve(current);
21
+ const Renderer = layoutRegistry.get(type);
22
+ if (!Renderer) return /* @__PURE__ */ jsxs(Fragment, { children: [
23
+ children,
24
+ " "
25
+ ] });
26
+ return /* @__PURE__ */ jsx(Renderer, { config: childConfig, children });
27
+ });
28
+ //# sourceMappingURL=responsiveLayout-2KUYZQJ3.mjs.map
@@ -0,0 +1 @@
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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dynamic-field-kit/react",
3
- "version": "1.0.4",
3
+ "version": "1.0.5",
4
4
  "description": "React renderer for dynamic-field-kit",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.cjs",