@dynamic-field-kit/react 1.0.7 → 1.1.0

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
@@ -1,299 +1,163 @@
1
- # Dynamic Field Kit
2
-
3
- A lightweight, extensible **dynamic form engine** for React, built for scalable applications and design systems.
4
-
5
- `dynamic-field-kit` lets you define forms using **configuration objects** instead of hard-coded UI, and allows applications to **freely extend field types** (`text`, `number`, `checkbox`, `select`, `date`, `custom`, …) without modifying the library.
6
-
7
- ---
8
-
9
- ## Features
10
-
11
- - Schema-driven dynamic forms
12
- - Extensible field types (no enums, no hard-coded unions)
13
- - Pluggable field renderers via registry
14
- - Runtime conditional fields (`appearCondition`)
15
- - Clean TypeScript declarations (DTS-safe)
16
- - Core logic separated from React rendering
17
- - Ideal for form builders & design systems
18
-
19
- ---
20
-
21
- ## 📦 Packages
22
-
23
- | Package | Description |
24
- |------|------------|
25
- | `@dynamic-field-kit/core` | Core types and field registry |
26
- | `@dynamic-field-kit/react` | React components (FieldInput, MultiFieldInput, DynamicInput) |
27
-
28
- ---
29
-
30
- ## 📥 Installation
31
-
32
- ```bash
33
- npm install @dynamic-field-kit/core @dynamic-field-kit/react
34
- ```
35
-
36
- **Peer dependency**
37
-
38
- ```txt
39
- react >= 17
40
- ```
41
-
42
- ---
43
-
44
- ## 🧱 Core Concepts
45
-
46
- The library **does NOT define field types** like:
47
- ```ts
48
- "text" | "number"
49
- ```
50
-
51
- Instead, it exposes an **extendable interface** that applications can augment:
52
- ```ts
53
- export interface FieldTypeMap {}
54
- ```
55
-
56
- This allows:
57
- - Unlimited custom field types
58
- - Strong typing without locking consumers
59
- - No need to rebuild the library
60
-
61
- This pattern is used by mature libraries like **MUI, React Hook Form,** and **Redux Toolkit**.
62
-
63
- ## 🧩 Defining Field Types (App Side)
64
-
65
- Create a `.d.ts` file in your app (e.g. src/types/dynamic-field.d.ts):
66
-
67
- ```ts
68
- import "@dynamic-field-kit/core"
69
-
70
- declare module "@dynamic-field-kit/core" {
71
- interface FieldTypeMap {
72
- text: string
73
- number: number
74
- checkbox: boolean
75
- select: string
76
- }
77
- }
78
- ```
79
- ⚠️ Make sure this file is included in tsconfig.json.
80
-
81
- ---
82
-
83
- ## FieldRendererProps
84
-
85
- ```ts
86
- export interface FieldRendererProps<T = any> {
87
- value?: T
88
- onValueChange?: (value: T) => void
89
- label?: string
90
- }
91
- ```
92
- 👉 A common contract for all field renderers
93
-
94
- ---
95
-
96
- ### FieldDescription
97
-
98
- A `FieldDescription` defines **what a field is**, not **how it looks**.
99
-
100
- ```ts
101
- import { FieldDescription } from "@dynamic-field-kit/core"
102
-
103
- const fields: FieldDescription[] = [
104
- {
105
- name: "username",
106
- type: "text",
107
- label: "Username"
108
- },
109
- {
110
- name: "age",
111
- type: "number",
112
- label: "Age",
113
- appearCondition: (data) => data.username !== ""
114
- }
115
- ]
116
- ```
117
-
118
- **Common Properties**
119
- | Property | Description |
120
- |------|------------|
121
- | name | Field key in form data |
122
- | type | Field renderer key |
123
- | label | UI label |
124
- | value | Default value |
125
- | appearCondition | Runtime visibility condition |
126
-
127
- **Field Registry (Render Layer)**
128
- The library does **not** ship UI components.
129
-
130
- Instead, applications register their own renderers.
131
-
132
- ```ts
133
- import { fieldRegistry } from "@dynamic-field-kit/react"
134
-
135
- fieldRegistry.register("text", ({ value, onValueChange, label }) => (
136
- <div>
137
- <label>{label}</label>
138
- <input
139
- value={value ?? ""}
140
- onChange={(e) => onValueChange?.(e.target.value)}
141
- />
142
- </div>
143
- ))
144
-
145
- fieldRegistry.register("checkbox", ({ value, onValueChange, label }) => (
146
- <label>
147
- <input
148
- type="checkbox"
149
- checked={!!value}
150
- onChange={(e) => onValueChange?.(e.target.checked)}
151
- />
152
- {label}
153
- </label>
154
- ))
155
-
156
- ```
157
-
158
- ---
159
-
160
- ## ⚛️ React Usage
161
-
162
- **MultiFieldInput (Main Form Engine)**
163
-
164
- ```tsx
165
- import { MultiFieldInput } from "@dynamic-field-kit/react"
166
- import { FieldDescription } from "@dynamic-field-kit/core"
167
-
168
- const fields: FieldDescription[] = [
169
- { name: "email", type: "text", label: "Email" },
170
- { name: "age", type: "number", label: "Age" }
171
- ]
172
-
173
- const Example = () => {
174
- return (
175
- <MultiFieldInput
176
- fieldDescriptions={fields}
177
- onChange={(data) => {
178
- console.log("Form data:", data)
179
- }}
180
- />
181
- )
182
- }
183
- ```
184
-
185
- **Controlled Form**
186
- ```tsx
187
- const [formData, setFormData] = useState({})
188
-
189
- <MultiFieldInput
190
- fieldDescriptions={fields}
191
- properties={formData}
192
- onChange={setFormData}
193
- />
194
- ```
195
-
196
- ---
197
-
198
- ## ➕ Adding a New Field Type
199
-
200
- You **do not** need to modify the library.
201
-
202
- Just extend `FieldTypeMap`:
203
-
204
- ```ts
205
- declare module "@dynamic-field-kit/core" {
206
- interface FieldTypeMap {
207
- date: Date
208
- }
209
- }
210
- ```
211
-
212
- Then register a renderer:
213
-
214
- ```ts
215
- fieldRegistry.register("date", ({ value, onValueChange }) => (
216
- <input
217
- type="date"
218
- value={value ? value.toISOString().slice(0, 10) : ""}
219
- onChange={(e) =>
220
- onValueChange?.(new Date(e.target.value))
221
- }
222
- />
223
- ))
224
- ```
225
-
226
- Now `"date"` is fully type-safe everywhere.
227
-
228
- ---
229
- ## 🧠 Domain Typing (Optional)
230
- The library intentionally avoids enforcing domain types.
231
- If you want strict typing, cast inside your app:
232
-
233
- ```ts
234
- interface UserForm {
235
- age: number
236
- }
237
-
238
- const fields: FieldDescription[] = [
239
- {
240
- name: "age",
241
- type: "number",
242
- appearCondition: (data) =>
243
- (data as UserForm).age > 18
244
- }
245
- ]
246
- ```
247
- This keeps the library generic while allowing strict typing in the app.
248
-
249
- ---
250
-
251
- ## 🧩 Components API
252
-
253
- **<DynamicInput />**
254
-
255
- Resolves and renders a field based on its type.
256
-
257
- ```tsx
258
- <DynamicInput type="text" value="hello" />
259
- ```
260
- ---
261
-
262
- **<FieldInput />**
263
-
264
- Renders a single field with value binding.
265
-
266
- ```tsx
267
- <FieldInput
268
- fieldDescription={field}
269
- renderInfos={formData}
270
- onChange={(value, key) => {}}
271
- />
272
- ```
273
-
274
- ## Demo
275
- - [Examples](https://github.com/vannt-dev/dynamic-field-kit-demo)
276
-
277
- ---
278
-
279
- ## 🏗 Architecture
280
-
281
- ```
282
- dynamic-field-kit
283
- ├─ packages/
284
- │ ├─ core # framework-agnostic types
285
- │ └─ react # React renderer + registry
286
- ```
287
-
288
- ---
289
-
290
- ## 🚫 Non-Goals
291
- This library intentionally does not include:
292
- -Built-in UI components
293
- -Built-in UI components
294
- -Form state management library
295
-
296
- It is a **form engine**, not a full form framework.
297
-
298
- ## 📄 License
299
- MIT © [vannt-dev](https://github.com/vannt-dev)
1
+ # @dynamic-field-kit/react
2
+
3
+ React renderer for `@dynamic-field-kit/core`.
4
+
5
+ This package provides React components that render dynamic fields from `FieldDescription[]` and resolve field renderers through the shared `fieldRegistry`.
6
+
7
+ ---
8
+
9
+ ## 📦 Packages
10
+
11
+ | Package | Description |
12
+ |------|------------|
13
+ | `@dynamic-field-kit/core` | Core types and field registry |
14
+ | `@dynamic-field-kit/react` | React components (FieldInput, MultiFieldInput, DynamicInput) |
15
+
16
+ ---
17
+ ## Installation
18
+
19
+ ```bash
20
+ npm install @dynamic-field-kit/core @dynamic-field-kit/react react
21
+ ```
22
+
23
+ Peer dependency:
24
+
25
+ ```txt
26
+ react >= 17
27
+ ```
28
+
29
+ ## Exports
30
+
31
+ - `DynamicInput`
32
+ - `FieldInput`
33
+ - `MultiFieldInput`
34
+ - `layoutRegistry`
35
+ - `fieldRegistry`
36
+ - `FieldDescription`, `FieldTypeKey`, `FieldRendererProps`
37
+
38
+ Default layouts are registered automatically when you import the package root.
39
+
40
+ Built-in layout types:
41
+
42
+ - `column`
43
+ - `row`
44
+ - `grid`
45
+ - `responsive`
46
+
47
+ ## Register field renderers
48
+
49
+ Register React components or functions in `fieldRegistry` before rendering your form:
50
+
51
+ ```tsx
52
+ import { fieldRegistry } from "@dynamic-field-kit/react"
53
+
54
+ fieldRegistry.register("text", ({ value, onValueChange, label }) => (
55
+ <label style={{ display: "grid", gap: 4 }}>
56
+ <span>{label}</span>
57
+ <input
58
+ value={value ?? ""}
59
+ onChange={(e) => onValueChange?.(e.target.value)}
60
+ />
61
+ </label>
62
+ ))
63
+
64
+ fieldRegistry.register("number", ({ value, onValueChange, label }) => (
65
+ <label style={{ display: "grid", gap: 4 }}>
66
+ <span>{label}</span>
67
+ <input
68
+ type="number"
69
+ value={value ?? ""}
70
+ onChange={(e) => onValueChange?.(Number(e.target.value))}
71
+ />
72
+ </label>
73
+ ))
74
+ ```
75
+
76
+ ## Basic usage
77
+
78
+ ```tsx
79
+ import { useState } from "react"
80
+ import { MultiFieldInput } from "@dynamic-field-kit/react"
81
+ import type { FieldDescription } from "@dynamic-field-kit/core"
82
+
83
+ const fields: FieldDescription[] = [
84
+ { name: "name", type: "text", label: "Name" },
85
+ { name: "age", type: "number", label: "Age" },
86
+ ]
87
+
88
+ export function Example() {
89
+ const [data, setData] = useState({})
90
+
91
+ return (
92
+ <MultiFieldInput
93
+ fieldDescriptions={fields}
94
+ properties={data}
95
+ onChange={setData}
96
+ />
97
+ )
98
+ }
99
+ ```
100
+
101
+ ## Layouts
102
+
103
+ Use a simple layout name:
104
+
105
+ ```tsx
106
+ <MultiFieldInput
107
+ fieldDescriptions={fields}
108
+ layout="grid"
109
+ />
110
+ ```
111
+
112
+ Use a layout config object:
113
+
114
+ ```tsx
115
+ <MultiFieldInput
116
+ fieldDescriptions={fields}
117
+ layout={{ type: "grid", columns: 3, gap: 16 }}
118
+ />
119
+ ```
120
+
121
+ Use the built-in responsive layout:
122
+
123
+ ```tsx
124
+ <MultiFieldInput
125
+ fieldDescriptions={fields}
126
+ layout={{
127
+ type: "responsive",
128
+ mobile: "column",
129
+ desktop: { type: "grid", columns: 2, gap: 12 },
130
+ }}
131
+ />
132
+ ```
133
+
134
+ You can also register custom layouts:
135
+
136
+ ```tsx
137
+ import { layoutRegistry } from "@dynamic-field-kit/react"
138
+
139
+ layoutRegistry.register("stack-tight", ({ children }) => (
140
+ <div style={{ display: "grid", gap: 8 }}>{children}</div>
141
+ ))
142
+ ```
143
+
144
+ ## Type augmentation
145
+
146
+ Add your app field types through module augmentation:
147
+
148
+ ```ts
149
+ import "@dynamic-field-kit/core"
150
+
151
+ declare module "@dynamic-field-kit/core" {
152
+ interface FieldTypeMap {
153
+ text: string
154
+ number: number
155
+ }
156
+ }
157
+ ```
158
+
159
+ ## Notes
160
+
161
+ - The library does not ship built-in field UI. Your app owns renderer registration.
162
+ - `MultiFieldInput` filters fields using `appearCondition`.
163
+ - `DynamicInput` shows `Unknown field type: ...` if a renderer is missing.
package/dist/index.js CHANGED
@@ -5,9 +5,6 @@ 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
- };
11
8
  var __commonJS = (cb, mod) => function __require() {
12
9
  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
13
10
  };
@@ -33,105 +30,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
33
30
  ));
34
31
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
35
32
 
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
-
135
33
  // ../core/dist/index.js
136
34
  var require_dist = __commonJS({
137
35
  "../core/dist/index.js"(exports2, module2) {
@@ -186,14 +84,82 @@ __export(index_exports, {
186
84
  });
187
85
  module.exports = __toCommonJS(index_exports);
188
86
 
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
- }
87
+ // src/layout/layoutRegistry.ts
88
+ var LayoutRegistry = class {
89
+ constructor() {
90
+ this.layouts = /* @__PURE__ */ new Map();
91
+ }
92
+ register(type, renderer) {
93
+ if (this.layouts.has(type)) {
94
+ console.warn(`[dynamic-field-kit] Layout "${type}" already exists`);
95
+ }
96
+ this.layouts.set(type, renderer);
97
+ }
98
+ get(type) {
99
+ return this.layouts.get(type);
100
+ }
101
+ };
102
+ var layoutRegistry = new LayoutRegistry();
103
+
104
+ // src/layout/defaultLayouts.tsx
105
+ var import_jsx_runtime = require("react/jsx-runtime");
106
+ layoutRegistry.register("column", ({ children, config }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
107
+ "div",
108
+ {
109
+ style: {
110
+ display: "flex",
111
+ flexDirection: "column",
112
+ gap: config?.gap ?? 12
113
+ },
114
+ children
115
+ }
116
+ ));
117
+ layoutRegistry.register("row", ({ children, config }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
118
+ "div",
119
+ {
120
+ style: {
121
+ display: "flex",
122
+ flexDirection: "row",
123
+ gap: config?.gap ?? 12
124
+ },
125
+ children
126
+ }
127
+ ));
128
+ layoutRegistry.register("grid", ({ children, config }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
129
+ "div",
130
+ {
131
+ style: {
132
+ display: "grid",
133
+ gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,
134
+ gap: config?.gap ?? 12
135
+ },
136
+ children
137
+ }
138
+ ));
194
139
 
195
- // src/layout/index.ts
196
- init_layoutRegistry();
140
+ // src/layout/responsiveLayout.tsx
141
+ var import_jsx_runtime2 = require("react/jsx-runtime");
142
+ function resolve(layout) {
143
+ if (typeof layout === "string") {
144
+ return { type: layout, config: {} };
145
+ }
146
+ return { type: layout.type, config: layout };
147
+ }
148
+ layoutRegistry.register("responsive", ({ children, config }) => {
149
+ const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
150
+ const current = isMobile ? config.mobile : config.desktop;
151
+ if (!current) return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
152
+ children,
153
+ " "
154
+ ] });
155
+ const { type, config: childConfig } = resolve(current);
156
+ const Renderer = layoutRegistry.get(type);
157
+ if (!Renderer) return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
158
+ children,
159
+ " "
160
+ ] });
161
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Renderer, { config: childConfig, children });
162
+ });
197
163
 
198
164
  // src/components/DynamicInput.tsx
199
165
  var import_core = __toESM(require_dist());
@@ -267,7 +233,6 @@ var MultiFieldInput_default = MultiFieldInput;
267
233
 
268
234
  // src/index.ts
269
235
  var import_core2 = __toESM(require_dist());
270
- registerDefaults();
271
236
  // Annotate the CommonJS export names for ESM import in node:
272
237
  0 && (module.exports = {
273
238
  DynamicInput,
package/dist/index.js.map CHANGED
@@ -1 +1 @@
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, not 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"]}
1
+ {"version":3,"sources":["../../core/src/index.ts","../../core/src/FieldRegistry.ts","../src/index.ts","../src/layout/layoutRegistry.ts","../src/layout/defaultLayouts.tsx","../src/layout/responsiveLayout.tsx","../src/components/DynamicInput.tsx","../src/components/FieldInput.tsx","../src/components/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, not 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 \"./layout/defaultLayouts\"\r\nimport \"./layout/responsiveLayout\"\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 selected core APIs\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","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","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":["index_exports","__export","fieldRegistry","module","__toCommonJS","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_core"]}
package/dist/index.mjs CHANGED
@@ -1,30 +1,50 @@
1
- import {
2
- __commonJS,
3
- __toESM,
4
- layoutRegistry
5
- } from "./chunk-HAKPX2A2.mjs";
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
+ ));
6
26
 
7
27
  // ../core/dist/index.js
8
28
  var require_dist = __commonJS({
9
29
  "../core/dist/index.js"(exports, module) {
10
30
  "use strict";
11
- var __defProp = Object.defineProperty;
12
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
13
- var __getOwnPropNames = Object.getOwnPropertyNames;
14
- var __hasOwnProp = Object.prototype.hasOwnProperty;
31
+ var __defProp2 = Object.defineProperty;
32
+ var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
33
+ var __getOwnPropNames2 = Object.getOwnPropertyNames;
34
+ var __hasOwnProp2 = Object.prototype.hasOwnProperty;
15
35
  var __export = (target, all) => {
16
36
  for (var name in all)
17
- __defProp(target, name, { get: all[name], enumerable: true });
37
+ __defProp2(target, name, { get: all[name], enumerable: true });
18
38
  };
19
- var __copyProps = (to, from, except, desc) => {
39
+ var __copyProps2 = (to, from, except, desc) => {
20
40
  if (from && typeof from === "object" || typeof from === "function") {
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 });
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 });
24
44
  }
25
45
  return to;
26
46
  };
27
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
47
+ var __toCommonJS = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
28
48
  var index_exports = {};
29
49
  __export(index_exports, {
30
50
  FieldRegistry: () => FieldRegistry,
@@ -47,30 +67,101 @@ var require_dist = __commonJS({
47
67
  }
48
68
  });
49
69
 
50
- // src/registerDefaults.ts
51
- async function registerDefaults() {
52
- await import("./defaultLayouts-PVN6T4LH.mjs");
53
- await import("./responsiveLayout-2KUYZQJ3.mjs");
70
+ // src/layout/layoutRegistry.ts
71
+ var LayoutRegistry = class {
72
+ constructor() {
73
+ this.layouts = /* @__PURE__ */ new Map();
74
+ }
75
+ register(type, renderer) {
76
+ if (this.layouts.has(type)) {
77
+ console.warn(`[dynamic-field-kit] Layout "${type}" already exists`);
78
+ }
79
+ this.layouts.set(type, renderer);
80
+ }
81
+ get(type) {
82
+ return this.layouts.get(type);
83
+ }
84
+ };
85
+ var layoutRegistry = new LayoutRegistry();
86
+
87
+ // src/layout/defaultLayouts.tsx
88
+ import { jsx } from "react/jsx-runtime";
89
+ layoutRegistry.register("column", ({ children, config }) => /* @__PURE__ */ jsx(
90
+ "div",
91
+ {
92
+ style: {
93
+ display: "flex",
94
+ flexDirection: "column",
95
+ gap: config?.gap ?? 12
96
+ },
97
+ children
98
+ }
99
+ ));
100
+ layoutRegistry.register("row", ({ children, config }) => /* @__PURE__ */ jsx(
101
+ "div",
102
+ {
103
+ style: {
104
+ display: "flex",
105
+ flexDirection: "row",
106
+ gap: config?.gap ?? 12
107
+ },
108
+ children
109
+ }
110
+ ));
111
+ layoutRegistry.register("grid", ({ children, config }) => /* @__PURE__ */ jsx(
112
+ "div",
113
+ {
114
+ style: {
115
+ display: "grid",
116
+ gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,
117
+ gap: config?.gap ?? 12
118
+ },
119
+ children
120
+ }
121
+ ));
122
+
123
+ // src/layout/responsiveLayout.tsx
124
+ import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
125
+ function resolve(layout) {
126
+ if (typeof layout === "string") {
127
+ return { type: layout, config: {} };
128
+ }
129
+ return { type: layout.type, config: layout };
54
130
  }
131
+ layoutRegistry.register("responsive", ({ children, config }) => {
132
+ const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
133
+ const current = isMobile ? config.mobile : config.desktop;
134
+ if (!current) return /* @__PURE__ */ jsxs(Fragment, { children: [
135
+ children,
136
+ " "
137
+ ] });
138
+ const { type, config: childConfig } = resolve(current);
139
+ const Renderer = layoutRegistry.get(type);
140
+ if (!Renderer) return /* @__PURE__ */ jsxs(Fragment, { children: [
141
+ children,
142
+ " "
143
+ ] });
144
+ return /* @__PURE__ */ jsx2(Renderer, { config: childConfig, children });
145
+ });
55
146
 
56
147
  // src/components/DynamicInput.tsx
57
148
  var import_core = __toESM(require_dist());
58
- import { jsx, jsxs } from "react/jsx-runtime";
149
+ import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
59
150
  var DynamicInput = ({ type, value, onChange, label, options, className, description }) => {
60
151
  const Renderer = import_core.fieldRegistry.get(type);
61
- if (!Renderer) return /* @__PURE__ */ jsxs("div", { children: [
152
+ if (!Renderer) return /* @__PURE__ */ jsxs2("div", { children: [
62
153
  "Unknown field type: ",
63
154
  type
64
155
  ] });
65
- return /* @__PURE__ */ jsx(Renderer, { value, onValueChange: onChange, label, options, className, description });
156
+ return /* @__PURE__ */ jsx3(Renderer, { value, onValueChange: onChange, label, options, className, description });
66
157
  };
67
158
  var DynamicInput_default = DynamicInput;
68
159
 
69
160
  // src/components/FieldInput.tsx
70
- import { jsx as jsx2 } from "react/jsx-runtime";
161
+ import { jsx as jsx4 } from "react/jsx-runtime";
71
162
  var FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }) => {
72
163
  const { name, type, label, options, className, description } = fieldDescription;
73
- return /* @__PURE__ */ jsx2(
164
+ return /* @__PURE__ */ jsx4(
74
165
  DynamicInput_default,
75
166
  {
76
167
  type,
@@ -87,7 +178,7 @@ var FieldInput_default = FieldInput;
87
178
 
88
179
  // src/components/MultiFieldInput.tsx
89
180
  import { useEffect, useMemo, useState } from "react";
90
- import { jsx as jsx3 } from "react/jsx-runtime";
181
+ import { jsx as jsx5 } from "react/jsx-runtime";
91
182
  function resolveLayout(layout) {
92
183
  if (!layout) return { type: "column", config: {} };
93
184
  if (typeof layout === "string") return { type: layout, config: {} };
@@ -107,7 +198,7 @@ var MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }) => {
107
198
  if (!Layout) {
108
199
  throw new Error(`Unknown layout: ${type}`);
109
200
  }
110
- return /* @__PURE__ */ jsx3(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ jsx3(
201
+ return /* @__PURE__ */ jsx5(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ jsx5(
111
202
  FieldInput_default,
112
203
  {
113
204
  fieldDescription: f,
@@ -125,7 +216,6 @@ var MultiFieldInput_default = MultiFieldInput;
125
216
 
126
217
  // src/index.ts
127
218
  var import_core2 = __toESM(require_dist());
128
- registerDefaults();
129
219
  var export_fieldRegistry = import_core2.fieldRegistry;
130
220
  export {
131
221
  DynamicInput_default as DynamicInput,
@@ -1 +1 @@
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, not 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"]}
1
+ {"version":3,"sources":["../../core/src/index.ts","../../core/src/FieldRegistry.ts","../src/layout/layoutRegistry.ts","../src/layout/defaultLayouts.tsx","../src/layout/responsiveLayout.tsx","../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, not 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 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","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 \"./layout/defaultLayouts\"\r\nimport \"./layout/responsiveLayout\"\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 selected core APIs\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":"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","names":["fieldRegistry","jsx","jsx","jsxs","jsx","jsx","import_core"]}
package/package.json CHANGED
@@ -1,28 +1,35 @@
1
1
  {
2
2
  "name": "@dynamic-field-kit/react",
3
- "version": "1.0.7",
3
+ "version": "1.1.0",
4
4
  "description": "React renderer for dynamic-field-kit",
5
5
  "license": "MIT",
6
- "main": "dist/index.cjs",
7
- "module": "dist/index.js",
6
+ "main": "dist/index.js",
7
+ "module": "dist/index.mjs",
8
8
  "types": "dist/index.d.ts",
9
- "sideEffects": false,
9
+ "sideEffects": [
10
+ "./src/index.ts",
11
+ "./src/layout/defaultLayouts.tsx",
12
+ "./src/layout/responsiveLayout.tsx",
13
+ "./dist/index.js",
14
+ "./dist/index.mjs",
15
+ "./dist/index.d.ts"
16
+ ],
10
17
  "files": [
11
18
  "dist"
12
19
  ],
13
20
  "dependencies": {
14
- "@dynamic-field-kit/core": "^1.0.3"
21
+ "@dynamic-field-kit/core": "^1.0.7"
15
22
  },
16
23
  "exports": {
17
24
  ".": {
18
25
  "types": "./dist/index.d.ts",
19
- "import": "./dist/index.js",
20
- "require": "./dist/index.cjs"
26
+ "import": "./dist/index.mjs",
27
+ "require": "./dist/index.js"
21
28
  }
22
29
  },
23
30
  "scripts": {
24
31
  "build": "tsup",
25
- "clean": "rm -rf dist",
32
+ "clean": "rimraf dist",
26
33
  "prepublishOnly": "npm run clean && npm run build",
27
34
  "release:patch": "npm version patch && npm publish",
28
35
  "release:minor": "npm version minor && npm publish",
@@ -1,49 +0,0 @@
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
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/layout/layoutRegistry.ts"],"sourcesContent":["import React from \"react\"\r\n\r\nexport type LayoutRenderer<C = any> = (props: {\r\n children: React.ReactNode\r\n config?: C\r\n}) => React.ReactElement\r\n\r\nexport class LayoutRegistry {\r\n private layouts = new Map<string, LayoutRenderer>()\r\n\r\n register(type: string, renderer: LayoutRenderer) {\r\n if (this.layouts.has(type)) {\r\n console.warn(`[dynamic-field-kit] Layout \"${type}\" already exists`)\r\n }\r\n this.layouts.set(type, renderer)\r\n }\r\n\r\n get(type: string): LayoutRenderer | undefined {\r\n return this.layouts.get(type)\r\n }\r\n}\r\n\r\nexport const layoutRegistry = new LayoutRegistry()\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,IAAM,iBAAN,MAAqB;AAAA,EAArB;AACH,SAAQ,UAAU,oBAAI,IAA4B;AAAA;AAAA,EAElD,SAAS,MAAc,UAA0B;AAC7C,QAAI,KAAK,QAAQ,IAAI,IAAI,GAAG;AACxB,cAAQ,KAAK,+BAA+B,IAAI,kBAAkB;AAAA,IACtE;AACA,SAAK,QAAQ,IAAI,MAAM,QAAQ;AAAA,EACnC;AAAA,EAEA,IAAI,MAA0C;AAC1C,WAAO,KAAK,QAAQ,IAAI,IAAI;AAAA,EAChC;AACJ;AAEO,IAAM,iBAAiB,IAAI,eAAe;","names":[]}
@@ -1,40 +0,0 @@
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
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/layout/defaultLayouts.tsx"],"sourcesContent":["import { layoutRegistry } from \"./layoutRegistry\"\r\n\r\nlayoutRegistry.register(\"column\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))\r\n\r\nlayoutRegistry.register(\"row\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))\r\n\r\nlayoutRegistry.register(\"grid\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"grid\",\r\n gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))"],"mappings":";;;;;AAGI;AADJ,eAAe,SAAS,UAAU,CAAC,EAAE,UAAU,OAAO,MAClD;AAAA,EAAC;AAAA;AAAA,IACG,OAAO;AAAA,MACH,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAK,QAAQ,OAAO;AAAA,IACxB;AAAA,IAEC;AAAA;AACL,CACH;AAED,eAAe,SAAS,OAAO,CAAC,EAAE,UAAU,OAAO,MAC/C;AAAA,EAAC;AAAA;AAAA,IACG,OAAO;AAAA,MACH,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAK,QAAQ,OAAO;AAAA,IACxB;AAAA,IAEC;AAAA;AACL,CACH;AAED,eAAe,SAAS,QAAQ,CAAC,EAAE,UAAU,OAAO,MAChD;AAAA,EAAC;AAAA;AAAA,IACG,OAAO;AAAA,MACH,SAAS;AAAA,MACT,qBAAqB,UAAU,QAAQ,WAAW,CAAC;AAAA,MACnD,KAAK,QAAQ,OAAO;AAAA,IACxB;AAAA,IAEC;AAAA;AACL,CACH;","names":[]}
@@ -1,28 +0,0 @@
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
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/layout/responsiveLayout.tsx"],"sourcesContent":["import { layoutRegistry } from \"./layoutRegistry\"\r\nimport { LayoutConfig } from \"../types/layout\"\r\n\r\nfunction resolve(layout: LayoutConfig) {\r\n if (typeof layout === \"string\") {\r\n return { type: layout, config: {} }\r\n }\r\n return { type: layout.type, config: layout }\r\n}\r\n\r\nlayoutRegistry.register(\"responsive\", ({ children, config }) => {\r\n const isMobile =\r\n typeof window !== \"undefined\" && window.innerWidth < 768\r\n\r\n const current = isMobile ? config.mobile : config.desktop\r\n if (!current) return <>{ children } </>\r\n\r\n const { type, config: childConfig } = resolve(current)\r\n const Renderer = layoutRegistry.get(type)\r\n\r\n if (!Renderer) return <>{ children } </>\r\n\r\n return (\r\n <Renderer config= { childConfig } >\r\n { children }\r\n </Renderer>\r\n )\r\n})\r\n"],"mappings":";;;;;AAeyB,mBAQjB,KARiB;AAZzB,SAAS,QAAQ,QAAsB;AACnC,MAAI,OAAO,WAAW,UAAU;AAC5B,WAAO,EAAE,MAAM,QAAQ,QAAQ,CAAC,EAAE;AAAA,EACtC;AACA,SAAO,EAAE,MAAM,OAAO,MAAM,QAAQ,OAAO;AAC/C;AAEA,eAAe,SAAS,cAAc,CAAC,EAAE,UAAU,OAAO,MAAM;AAC5D,QAAM,WACF,OAAO,WAAW,eAAe,OAAO,aAAa;AAEzD,QAAM,UAAU,WAAW,OAAO,SAAS,OAAO;AAClD,MAAI,CAAC,QAAS,QAAO,iCAAI;AAAA;AAAA,IAAU;AAAA,KAAC;AAEpC,QAAM,EAAE,MAAM,QAAQ,YAAY,IAAI,QAAQ,OAAO;AACrD,QAAM,WAAW,eAAe,IAAI,IAAI;AAExC,MAAI,CAAC,SAAU,QAAO,iCAAI;AAAA;AAAA,IAAU;AAAA,KAAC;AAErC,SACI,oBAAC,YAAS,QAAU,aAClB,UACF;AAER,CAAC;","names":[]}