@dynamic-field-kit/react 1.0.4 → 1.0.6

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,54 @@
1
+ import React, { ReactNode } 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, Properties, FieldDescription } 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;
33
+ options?: Properties[];
34
+ className?: string;
35
+ description?: ReactNode;
13
36
  }
14
- declare const DynamicInput: <T extends FieldTypeKey$1>({ type, value, onChange, label, }: Props$2<T>) => react_jsx_runtime.JSX.Element;
37
+ declare const DynamicInput: <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description }: Props$2<T>) => react_jsx_runtime.JSX.Element;
15
38
 
16
39
  interface Props$1 {
17
40
  fieldDescription: FieldDescription;
18
41
  renderInfos: Properties;
19
42
  onValueChangeField: (value: any, key: string) => void;
20
43
  }
21
- declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField, }: Props$1) => react_jsx_runtime.JSX.Element;
44
+ declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField }: Props$1) => react_jsx_runtime.JSX.Element;
22
45
 
23
46
  interface Props {
24
47
  fieldDescriptions: FieldDescription[];
25
48
  properties?: Properties;
26
49
  onChange?: (data: Properties) => void;
50
+ layout?: LayoutConfig;
27
51
  }
28
- declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, }: Props) => react_jsx_runtime.JSX.Element;
52
+ declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout }: Props) => react_jsx_runtime.JSX.Element;
29
53
 
30
- export { DynamicInput, FieldInput, type FieldTypeKey, type FieldTypeMap, MultiFieldInput };
54
+ export { DynamicInput, FieldInput, type LayoutConfig, MultiFieldInput, layoutRegistry };
package/dist/index.d.ts CHANGED
@@ -1,30 +1,54 @@
1
+ import React, { ReactNode } 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, Properties, FieldDescription } 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;
33
+ options?: Properties[];
34
+ className?: string;
35
+ description?: ReactNode;
13
36
  }
14
- declare const DynamicInput: <T extends FieldTypeKey$1>({ type, value, onChange, label, }: Props$2<T>) => react_jsx_runtime.JSX.Element;
37
+ declare const DynamicInput: <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description }: Props$2<T>) => react_jsx_runtime.JSX.Element;
15
38
 
16
39
  interface Props$1 {
17
40
  fieldDescription: FieldDescription;
18
41
  renderInfos: Properties;
19
42
  onValueChangeField: (value: any, key: string) => void;
20
43
  }
21
- declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField, }: Props$1) => react_jsx_runtime.JSX.Element;
44
+ declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField }: Props$1) => react_jsx_runtime.JSX.Element;
22
45
 
23
46
  interface Props {
24
47
  fieldDescriptions: FieldDescription[];
25
48
  properties?: Properties;
26
49
  onChange?: (data: Properties) => void;
50
+ layout?: LayoutConfig;
27
51
  }
28
- declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, }: Props) => react_jsx_runtime.JSX.Element;
52
+ declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout }: Props) => react_jsx_runtime.JSX.Element;
29
53
 
30
- export { DynamicInput, FieldInput, type FieldTypeKey, type FieldTypeMap, MultiFieldInput };
54
+ 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,76 +180,76 @@ 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, options, className, description }) => {
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, options, className, description });
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
- }) => {
119
- const { name, type, label } = fieldDescription;
120
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
211
+ // src/components/FieldInput.tsx
212
+ var import_jsx_runtime4 = require("react/jsx-runtime");
213
+ var FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }) => {
214
+ const { name, type, label, options, className, description } = fieldDescription;
215
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
121
216
  DynamicInput_default,
122
217
  {
123
218
  type,
124
219
  label,
125
220
  value: renderInfos[name],
221
+ options,
222
+ className,
223
+ description,
126
224
  onChange: (v) => onValueChangeField(v, name)
127
225
  }
128
226
  );
129
227
  };
130
228
  var FieldInput_default = FieldInput;
131
229
 
132
- // src/MultiFieldInput.tsx
230
+ // src/components/MultiFieldInput.tsx
133
231
  var import_react = require("react");
134
- var import_jsx_runtime3 = require("react/jsx-runtime");
135
- var MultiFieldInput = ({
136
- fieldDescriptions,
137
- properties,
138
- onChange
139
- }) => {
232
+ var import_jsx_runtime5 = require("react/jsx-runtime");
233
+ function resolveLayout(layout) {
234
+ if (!layout) return { type: "column", config: {} };
235
+ if (typeof layout === "string") return { type: layout, config: {} };
236
+ return { type: layout.type, config: layout };
237
+ }
238
+ var MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }) => {
140
239
  const [data, setData] = (0, import_react.useState)({});
141
240
  (0, import_react.useEffect)(() => {
142
241
  if (properties) setData(properties);
143
242
  }, [properties]);
144
243
  const visibleFields = (0, import_react.useMemo)(
145
- () => fieldDescriptions.filter(
146
- (f) => !f.appearCondition || f.appearCondition(data)
147
- ),
244
+ () => fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(data)),
148
245
  [fieldDescriptions, data]
149
246
  );
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)(
247
+ const { type, config } = resolveLayout(layout);
248
+ const Layout = layoutRegistry.get(type);
249
+ if (!Layout) {
250
+ throw new Error(`Unknown layout: ${type}`);
251
+ }
252
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
151
253
  FieldInput_default,
152
254
  {
153
255
  fieldDescription: f,
@@ -157,14 +259,21 @@ var MultiFieldInput = ({
157
259
  setData(next);
158
260
  onChange?.(next);
159
261
  }
160
- }
161
- ) }, f.name)) });
262
+ },
263
+ f.name
264
+ )) });
162
265
  };
163
266
  var MultiFieldInput_default = MultiFieldInput;
267
+
268
+ // src/index.ts
269
+ var import_core2 = __toESM(require_dist());
270
+ registerDefaults();
164
271
  // Annotate the CommonJS export names for ESM import in node:
165
272
  0 && (module.exports = {
166
273
  DynamicInput,
167
274
  FieldInput,
168
- MultiFieldInput
275
+ MultiFieldInput,
276
+ fieldRegistry,
277
+ layoutRegistry
169
278
  });
170
279
  //# 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, Properties } from \"@dynamic-field-kit/core\"\r\nimport { ReactNode } from \"react\"\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 options?: Properties[]\r\n className?: string\r\n description?: ReactNode\r\n}\r\n\r\n\r\nconst DynamicInput = <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description }: 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} options={options} className={className} description={description} />\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, options, className, description } = 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 options={options}\r\n className={className}\r\n description={description}\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,76 +43,71 @@ 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, options, className, description }) => {
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, options, className, description });
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
- }) => {
104
- const { name, type, label } = fieldDescription;
71
+ var FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }) => {
72
+ const { name, type, label, options, className, description } = fieldDescription;
105
73
  return /* @__PURE__ */ jsx2(
106
74
  DynamicInput_default,
107
75
  {
108
76
  type,
109
77
  label,
110
78
  value: renderInfos[name],
79
+ options,
80
+ className,
81
+ description,
111
82
  onChange: (v) => onValueChangeField(v, name)
112
83
  }
113
84
  );
114
85
  };
115
86
  var FieldInput_default = FieldInput;
116
87
 
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
- }) => {
88
+ // src/components/MultiFieldInput.tsx
89
+ import { useEffect, useMemo, useState } from "react";
90
+ import { jsx as jsx3 } from "react/jsx-runtime";
91
+ function resolveLayout(layout) {
92
+ if (!layout) return { type: "column", config: {} };
93
+ if (typeof layout === "string") return { type: layout, config: {} };
94
+ return { type: layout.type, config: layout };
95
+ }
96
+ var MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }) => {
125
97
  const [data, setData] = useState({});
126
98
  useEffect(() => {
127
99
  if (properties) setData(properties);
128
100
  }, [properties]);
129
101
  const visibleFields = useMemo(
130
- () => fieldDescriptions.filter(
131
- (f) => !f.appearCondition || f.appearCondition(data)
132
- ),
102
+ () => fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(data)),
133
103
  [fieldDescriptions, data]
134
104
  );
135
- return /* @__PURE__ */ jsx3(Fragment2, { children: visibleFields.map((f) => /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsx3(
105
+ const { type, config } = resolveLayout(layout);
106
+ const Layout = layoutRegistry.get(type);
107
+ if (!Layout) {
108
+ throw new Error(`Unknown layout: ${type}`);
109
+ }
110
+ return /* @__PURE__ */ jsx3(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ jsx3(
136
111
  FieldInput_default,
137
112
  {
138
113
  fieldDescription: f,
@@ -142,13 +117,21 @@ var MultiFieldInput = ({
142
117
  setData(next);
143
118
  onChange?.(next);
144
119
  }
145
- }
146
- ) }, f.name)) });
120
+ },
121
+ f.name
122
+ )) });
147
123
  };
148
124
  var MultiFieldInput_default = MultiFieldInput;
125
+
126
+ // src/index.ts
127
+ var import_core2 = __toESM(require_dist());
128
+ registerDefaults();
129
+ var export_fieldRegistry = import_core2.fieldRegistry;
149
130
  export {
150
131
  DynamicInput_default as DynamicInput,
151
132
  FieldInput_default as FieldInput,
152
- MultiFieldInput_default as MultiFieldInput
133
+ MultiFieldInput_default as MultiFieldInput,
134
+ export_fieldRegistry as fieldRegistry,
135
+ layoutRegistry
153
136
  };
154
137
  //# 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, Properties } from \"@dynamic-field-kit/core\"\r\nimport { ReactNode } from \"react\"\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 options?: Properties[]\r\n className?: string\r\n description?: ReactNode\r\n}\r\n\r\n\r\nconst DynamicInput = <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description }: 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} options={options} className={className} description={description} />\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, options, className, description } = 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 options={options}\r\n className={className}\r\n description={description}\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,kBAAwD;AAkB9B,SAGf,KAHe;AAJ1B,IAAM,eAAe,CAAyB,EAAE,MAAM,OAAO,UAAU,OAAO,SAAS,WAAW,YAAY,MAAgB;AAC1H,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,SAAkB,WAAsB,aAA0B;AAC5I;AAGA,IAAO,uBAAQ;;;ACVX,gBAAAC,YAAA;AALJ,IAAM,aAAa,CAAC,EAAE,kBAAkB,aAAa,mBAAmB,MAAa;AACnF,QAAM,EAAE,MAAM,MAAM,OAAO,SAAS,WAAW,YAAY,IAAI;AAG/D,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO,YAAY,IAAI;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,MAAM,mBAAmB,GAAG,IAAI;AAAA;AAAA,EAC7C;AAEJ;AAGA,IAAO,qBAAQ;;;AC3Bf,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.6",
4
4
  "description": "React renderer for dynamic-field-kit",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.cjs",