config-driven-form 1.1.1 → 1.2.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.
Files changed (8) hide show
  1. package/README.md +194 -16
  2. package/dist/index.d.mts +23 -1
  3. package/dist/index.d.ts +23 -1
  4. package/dist/index.js +318 -136
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +318 -136
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  var reactHookForm = require('react-hook-form');
4
4
  var ajv = require('@hookform/resolvers/ajv');
5
- var lucideReact = require('lucide-react');
6
- var jsxRuntime = require('react/jsx-runtime');
7
5
  var react = require('react');
6
+ var jsxRuntime = require('react/jsx-runtime');
7
+ var lucideReact = require('lucide-react');
8
8
  var react$1 = require('@tiptap/react');
9
9
  var StarterKit = require('@tiptap/starter-kit');
10
10
 
@@ -13,14 +13,24 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
13
13
  var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
14
14
 
15
15
  // src/components/SchemaForm.tsx
16
- var TextField = ({ name, schema, isRequired }) => {
16
+ var ClassNamesContext = react.createContext({});
17
+ var ClassNamesProvider = ({ value = {}, children }) => {
18
+ return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesContext.Provider, { value, children });
19
+ };
20
+ var useClassNames = () => react.useContext(ClassNamesContext);
21
+ var cx = (...classes) => {
22
+ return classes.filter(Boolean).join(" ").trim();
23
+ };
24
+ var TextField = ({ name, schema, uiSchema, isRequired }) => {
25
+ const globalClasses = useClassNames();
26
+ const localClasses = (uiSchema == null ? void 0 : uiSchema["ui:classNames"]) || {};
17
27
  const {
18
28
  register,
19
29
  formState: { errors }
20
30
  } = reactHookForm.useFormContext();
21
31
  const error = errors[name];
22
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdf-field-group", children: [
23
- /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cdf-label", htmlFor: name, children: [
32
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("cdf-field-group", globalClasses.fieldGroup, localClasses.fieldGroup), children: [
33
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx("cdf-label", globalClasses.label, localClasses.label), htmlFor: name, children: [
24
34
  schema.title || name,
25
35
  isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
26
36
  ] }),
@@ -29,26 +39,40 @@ var TextField = ({ name, schema, isRequired }) => {
29
39
  {
30
40
  id: name,
31
41
  type: schema.format === "email" ? "email" : "text",
32
- className: `cdf-input ${error ? "cdf-input--error" : ""}`,
42
+ className: cx(
43
+ "cdf-input",
44
+ globalClasses.input,
45
+ localClasses.input,
46
+ error && "cdf-input--error",
47
+ error && globalClasses.inputError,
48
+ error && localClasses.inputError
49
+ ),
33
50
  placeholder: `Enter ${schema.title || name}`,
34
51
  ...register(name)
35
52
  }
36
53
  ) }),
37
- error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cdf-error-message", children: [
54
+ error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx("cdf-error-message", globalClasses.errorText, localClasses.errorText), children: [
38
55
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 14 }),
39
56
  error.message
40
57
  ] })
41
58
  ] });
42
59
  };
43
- var PasswordField = ({ name, schema, isRequired }) => {
60
+ var PasswordField = ({
61
+ name,
62
+ schema,
63
+ uiSchema,
64
+ isRequired
65
+ }) => {
66
+ const globalClasses = useClassNames();
67
+ const localClasses = (uiSchema == null ? void 0 : uiSchema["ui:classNames"]) || {};
44
68
  const {
45
69
  register,
46
70
  formState: { errors }
47
71
  } = reactHookForm.useFormContext();
48
72
  const [showPassword, setShowPassword] = react.useState(false);
49
73
  const error = errors[name];
50
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdf-field-group", children: [
51
- /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cdf-label", htmlFor: name, children: [
74
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("cdf-field-group", globalClasses.fieldGroup, localClasses.fieldGroup), children: [
75
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx("cdf-label", globalClasses.label, localClasses.label), htmlFor: name, children: [
52
76
  schema.title || name,
53
77
  isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
54
78
  ] }),
@@ -58,7 +82,14 @@ var PasswordField = ({ name, schema, isRequired }) => {
58
82
  {
59
83
  id: name,
60
84
  type: showPassword ? "text" : "password",
61
- className: `cdf-input ${error ? "cdf-input--error" : ""}`,
85
+ className: cx(
86
+ "cdf-input",
87
+ globalClasses.input,
88
+ localClasses.input,
89
+ error && "cdf-input--error",
90
+ error && globalClasses.inputError,
91
+ error && localClasses.inputError
92
+ ),
62
93
  style: { paddingRight: "2.5rem" },
63
94
  placeholder: `Enter ${schema.title || name}`,
64
95
  ...register(name)
@@ -75,20 +106,22 @@ var PasswordField = ({ name, schema, isRequired }) => {
75
106
  }
76
107
  )
77
108
  ] }),
78
- error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cdf-error-message", children: [
109
+ error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx("cdf-error-message", globalClasses.errorText, localClasses.errorText), children: [
79
110
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 14 }),
80
111
  error.message
81
112
  ] })
82
113
  ] });
83
114
  };
84
- var NumberField = ({ name, schema, isRequired }) => {
115
+ var NumberField = ({ name, schema, uiSchema, isRequired }) => {
116
+ const globalClasses = useClassNames();
117
+ const localClasses = (uiSchema == null ? void 0 : uiSchema["ui:classNames"]) || {};
85
118
  const {
86
119
  register,
87
120
  formState: { errors }
88
121
  } = reactHookForm.useFormContext();
89
122
  const error = errors[name];
90
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdf-field-group", children: [
91
- /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cdf-label", htmlFor: name, children: [
123
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("cdf-field-group", globalClasses.fieldGroup, localClasses.fieldGroup), children: [
124
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx("cdf-label", globalClasses.label, localClasses.label), htmlFor: name, children: [
92
125
  schema.title || name,
93
126
  isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
94
127
  ] }),
@@ -97,20 +130,34 @@ var NumberField = ({ name, schema, isRequired }) => {
97
130
  {
98
131
  id: name,
99
132
  type: "number",
100
- className: `cdf-input ${error ? "cdf-input--error" : ""}`,
133
+ className: cx(
134
+ "cdf-input",
135
+ globalClasses.input,
136
+ localClasses.input,
137
+ error && "cdf-input--error",
138
+ error && globalClasses.inputError,
139
+ error && localClasses.inputError
140
+ ),
101
141
  placeholder: `Enter ${schema.title || name}`,
102
142
  ...register(name, {
103
143
  valueAsNumber: true
104
144
  })
105
145
  }
106
146
  ) }),
107
- error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cdf-error-message", children: [
147
+ error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx("cdf-error-message", globalClasses.errorText, localClasses.errorText), children: [
108
148
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 14 }),
109
149
  error.message
110
150
  ] })
111
151
  ] });
112
152
  };
113
- var RichTextField = ({ name, schema, isRequired }) => {
153
+ var RichTextField = ({
154
+ name,
155
+ schema,
156
+ uiSchema,
157
+ isRequired
158
+ }) => {
159
+ const globalClasses = useClassNames();
160
+ const localClasses = (uiSchema == null ? void 0 : uiSchema["ui:classNames"]) || {};
114
161
  const {
115
162
  setValue,
116
163
  watch,
@@ -130,76 +177,89 @@ var RichTextField = ({ name, schema, isRequired }) => {
130
177
  editor.commands.setContent(value || "");
131
178
  }
132
179
  }, [value, editor]);
133
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdf-field-group", children: [
134
- /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cdf-label", htmlFor: name, children: [
180
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("cdf-field-group", globalClasses.fieldGroup, localClasses.fieldGroup), children: [
181
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx("cdf-label", globalClasses.label, localClasses.label), htmlFor: name, children: [
135
182
  schema.title || name,
136
183
  isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
137
184
  ] }),
138
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `cdf-rich-text-wrapper ${error ? "cdf-input--error" : ""}`, children: [
139
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdf-rich-text-toolbar", children: [
140
- /* @__PURE__ */ jsxRuntime.jsx(
141
- "button",
142
- {
143
- type: "button",
144
- onClick: () => editor == null ? void 0 : editor.chain().focus().toggleBold().run(),
145
- className: `cdf-toolbar-btn ${(editor == null ? void 0 : editor.isActive("bold")) ? "is-active" : ""}`,
146
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bold, { size: 16 })
147
- }
148
- ),
149
- /* @__PURE__ */ jsxRuntime.jsx(
150
- "button",
151
- {
152
- type: "button",
153
- onClick: () => editor == null ? void 0 : editor.chain().focus().toggleItalic().run(),
154
- className: `cdf-toolbar-btn ${(editor == null ? void 0 : editor.isActive("italic")) ? "is-active" : ""}`,
155
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Italic, { size: 16 })
156
- }
157
- ),
158
- /* @__PURE__ */ jsxRuntime.jsx(
159
- "button",
160
- {
161
- type: "button",
162
- onClick: () => editor == null ? void 0 : editor.chain().focus().toggleHeading({ level: 2 }).run(),
163
- className: `cdf-toolbar-btn ${(editor == null ? void 0 : editor.isActive("heading", { level: 2 })) ? "is-active" : ""}`,
164
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading2, { size: 16 })
165
- }
166
- ),
167
- /* @__PURE__ */ jsxRuntime.jsx(
168
- "button",
169
- {
170
- type: "button",
171
- onClick: () => editor == null ? void 0 : editor.chain().focus().toggleBulletList().run(),
172
- className: `cdf-toolbar-btn ${(editor == null ? void 0 : editor.isActive("bulletList")) ? "is-active" : ""}`,
173
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { size: 16 })
174
- }
185
+ /* @__PURE__ */ jsxRuntime.jsxs(
186
+ "div",
187
+ {
188
+ className: cx(
189
+ "cdf-rich-text-wrapper",
190
+ error && "cdf-input--error",
191
+ error && globalClasses.inputError,
192
+ error && localClasses.inputError
175
193
  ),
176
- /* @__PURE__ */ jsxRuntime.jsx(
177
- "button",
178
- {
179
- type: "button",
180
- onClick: () => editor == null ? void 0 : editor.chain().focus().toggleOrderedList().run(),
181
- className: `cdf-toolbar-btn ${(editor == null ? void 0 : editor.isActive("orderedList")) ? "is-active" : ""}`,
182
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListOrdered, { size: 16 })
183
- }
184
- )
185
- ] }),
186
- /* @__PURE__ */ jsxRuntime.jsx(react$1.EditorContent, { editor, className: "cdf-rich-text-content" })
187
- ] }),
188
- error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cdf-error-message", children: [
194
+ children: [
195
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdf-rich-text-toolbar", children: [
196
+ /* @__PURE__ */ jsxRuntime.jsx(
197
+ "button",
198
+ {
199
+ type: "button",
200
+ onClick: () => editor == null ? void 0 : editor.chain().focus().toggleBold().run(),
201
+ className: `cdf-toolbar-btn ${(editor == null ? void 0 : editor.isActive("bold")) ? "is-active" : ""}`,
202
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bold, { size: 16 })
203
+ }
204
+ ),
205
+ /* @__PURE__ */ jsxRuntime.jsx(
206
+ "button",
207
+ {
208
+ type: "button",
209
+ onClick: () => editor == null ? void 0 : editor.chain().focus().toggleItalic().run(),
210
+ className: `cdf-toolbar-btn ${(editor == null ? void 0 : editor.isActive("italic")) ? "is-active" : ""}`,
211
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Italic, { size: 16 })
212
+ }
213
+ ),
214
+ /* @__PURE__ */ jsxRuntime.jsx(
215
+ "button",
216
+ {
217
+ type: "button",
218
+ onClick: () => editor == null ? void 0 : editor.chain().focus().toggleHeading({ level: 2 }).run(),
219
+ className: `cdf-toolbar-btn ${(editor == null ? void 0 : editor.isActive("heading", { level: 2 })) ? "is-active" : ""}`,
220
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading2, { size: 16 })
221
+ }
222
+ ),
223
+ /* @__PURE__ */ jsxRuntime.jsx(
224
+ "button",
225
+ {
226
+ type: "button",
227
+ onClick: () => editor == null ? void 0 : editor.chain().focus().toggleBulletList().run(),
228
+ className: `cdf-toolbar-btn ${(editor == null ? void 0 : editor.isActive("bulletList")) ? "is-active" : ""}`,
229
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { size: 16 })
230
+ }
231
+ ),
232
+ /* @__PURE__ */ jsxRuntime.jsx(
233
+ "button",
234
+ {
235
+ type: "button",
236
+ onClick: () => editor == null ? void 0 : editor.chain().focus().toggleOrderedList().run(),
237
+ className: `cdf-toolbar-btn ${(editor == null ? void 0 : editor.isActive("orderedList")) ? "is-active" : ""}`,
238
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListOrdered, { size: 16 })
239
+ }
240
+ )
241
+ ] }),
242
+ /* @__PURE__ */ jsxRuntime.jsx(react$1.EditorContent, { editor, className: "cdf-rich-text-content" })
243
+ ]
244
+ }
245
+ ),
246
+ error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx("cdf-error-message", globalClasses.errorText, localClasses.errorText), children: [
189
247
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 14 }),
190
248
  error.message
191
249
  ] })
192
250
  ] });
193
251
  };
194
- var SelectField = ({ name, schema, isRequired }) => {
252
+ var SelectField = ({ name, schema, uiSchema, isRequired }) => {
195
253
  var _a;
254
+ const globalClasses = useClassNames();
255
+ const localClasses = (uiSchema == null ? void 0 : uiSchema["ui:classNames"]) || {};
196
256
  const {
197
257
  register,
198
258
  formState: { errors }
199
259
  } = reactHookForm.useFormContext();
200
260
  const error = errors[name];
201
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdf-field-group", children: [
202
- /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: name, className: "cdf-label", children: [
261
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("cdf-field-group", globalClasses.fieldGroup, localClasses.fieldGroup), children: [
262
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: name, className: cx("cdf-label", globalClasses.label, localClasses.label), children: [
203
263
  schema.title || name,
204
264
  isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
205
265
  ] }),
@@ -208,14 +268,22 @@ var SelectField = ({ name, schema, isRequired }) => {
208
268
  {
209
269
  id: name,
210
270
  ...register(name),
211
- className: `cdf-input cdf-select ${error ? "cdf-input--error" : ""}`,
271
+ className: cx(
272
+ "cdf-input",
273
+ "cdf-select",
274
+ globalClasses.input,
275
+ localClasses.input,
276
+ error && "cdf-input--error",
277
+ error && globalClasses.inputError,
278
+ error && localClasses.inputError
279
+ ),
212
280
  children: [
213
281
  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select an option..." }),
214
282
  (_a = schema.enum) == null ? void 0 : _a.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option, children: option }, option))
215
283
  ]
216
284
  }
217
285
  ) }),
218
- error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cdf-error-message", children: [
286
+ error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx("cdf-error-message", globalClasses.errorText, localClasses.errorText), children: [
219
287
  /* @__PURE__ */ jsxRuntime.jsxs(
220
288
  "svg",
221
289
  {
@@ -236,23 +304,40 @@ var SelectField = ({ name, schema, isRequired }) => {
236
304
  ] })
237
305
  ] });
238
306
  };
239
- var RadioField = ({ name, schema, isRequired }) => {
307
+ var RadioField = ({ name, schema, uiSchema, isRequired }) => {
240
308
  var _a;
309
+ const globalClasses = useClassNames();
310
+ const localClasses = (uiSchema == null ? void 0 : uiSchema["ui:classNames"]) || {};
241
311
  const {
242
312
  register,
243
313
  formState: { errors }
244
314
  } = reactHookForm.useFormContext();
245
315
  const error = errors[name];
246
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdf-field-group", children: [
247
- /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cdf-label", children: [
316
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("cdf-field-group", globalClasses.fieldGroup, localClasses.fieldGroup), children: [
317
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx("cdf-label", globalClasses.label, localClasses.label), children: [
248
318
  schema.title || name,
249
319
  isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
250
320
  ] }),
251
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cdf-radio-group", children: (_a = schema.enum) == null ? void 0 : _a.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cdf-radio-label", children: [
252
- /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", value: option, ...register(name), className: "cdf-radio-input" }),
321
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("cdf-radio-group", globalClasses.radioGroup, localClasses.radioGroup), children: (_a = schema.enum) == null ? void 0 : _a.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
322
+ "label",
323
+ {
324
+ className: cx("cdf-radio-label", globalClasses.radioLabel, localClasses.radioLabel),
325
+ children: [
326
+ /* @__PURE__ */ jsxRuntime.jsx(
327
+ "input",
328
+ {
329
+ type: "radio",
330
+ value: option,
331
+ ...register(name),
332
+ className: cx("cdf-radio-input", globalClasses.radioInput, localClasses.radioInput)
333
+ }
334
+ ),
335
+ option
336
+ ]
337
+ },
253
338
  option
254
- ] }, option)) }),
255
- error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cdf-error-message", children: [
339
+ )) }),
340
+ error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx("cdf-error-message", globalClasses.errorText, localClasses.errorText), children: [
256
341
  /* @__PURE__ */ jsxRuntime.jsxs(
257
342
  "svg",
258
343
  {
@@ -273,20 +358,58 @@ var RadioField = ({ name, schema, isRequired }) => {
273
358
  ] })
274
359
  ] });
275
360
  };
276
- var CheckboxField = ({ name, schema, isRequired }) => {
361
+ var CheckboxField = ({
362
+ name,
363
+ schema,
364
+ uiSchema,
365
+ isRequired
366
+ }) => {
367
+ const globalClasses = useClassNames();
368
+ const localClasses = (uiSchema == null ? void 0 : uiSchema["ui:classNames"]) || {};
277
369
  const {
278
370
  register,
279
371
  formState: { errors }
280
372
  } = reactHookForm.useFormContext();
281
373
  const error = errors[name];
282
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdf-field-group", children: [
283
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cdf-checkbox-group", children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cdf-checkbox-label", children: [
284
- /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", ...register(name), className: "cdf-checkbox-input" }),
285
- schema.title || name,
286
- isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
287
- ] }) }),
374
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("cdf-field-group", globalClasses.fieldGroup, localClasses.fieldGroup), children: [
375
+ /* @__PURE__ */ jsxRuntime.jsx(
376
+ "div",
377
+ {
378
+ className: cx(
379
+ "cdf-checkbox-group",
380
+ globalClasses.checkboxGroup,
381
+ localClasses.checkboxGroup
382
+ ),
383
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
384
+ "label",
385
+ {
386
+ className: cx(
387
+ "cdf-checkbox-label",
388
+ globalClasses.checkboxLabel,
389
+ localClasses.checkboxLabel
390
+ ),
391
+ children: [
392
+ /* @__PURE__ */ jsxRuntime.jsx(
393
+ "input",
394
+ {
395
+ type: "checkbox",
396
+ ...register(name),
397
+ className: cx(
398
+ "cdf-checkbox-input",
399
+ globalClasses.checkboxInput,
400
+ localClasses.checkboxInput
401
+ )
402
+ }
403
+ ),
404
+ schema.title || name,
405
+ isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
406
+ ]
407
+ }
408
+ )
409
+ }
410
+ ),
288
411
  schema.description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.875rem", color: "var(--cdf-text-muted)", marginTop: "0.25rem" }, children: schema.description }),
289
- error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cdf-error-message", children: [
412
+ error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx("cdf-error-message", globalClasses.errorText, localClasses.errorText), children: [
290
413
  /* @__PURE__ */ jsxRuntime.jsxs(
291
414
  "svg",
292
415
  {
@@ -310,8 +433,11 @@ var CheckboxField = ({ name, schema, isRequired }) => {
310
433
  var CheckboxGroupField = ({
311
434
  name,
312
435
  schema,
436
+ uiSchema,
313
437
  isRequired
314
438
  }) => {
439
+ const globalClasses = useClassNames();
440
+ const localClasses = (uiSchema == null ? void 0 : uiSchema["ui:classNames"]) || {};
315
441
  const {
316
442
  register,
317
443
  formState: { errors }
@@ -321,24 +447,49 @@ var CheckboxGroupField = ({
321
447
  if (schema.items && !Array.isArray(schema.items) && schema.items.enum) {
322
448
  options = schema.items.enum;
323
449
  }
324
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdf-field-group", children: [
325
- /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cdf-label", children: [
450
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("cdf-field-group", globalClasses.fieldGroup, localClasses.fieldGroup), children: [
451
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx("cdf-label", globalClasses.label, localClasses.label), children: [
326
452
  schema.title || name,
327
453
  isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
328
454
  ] }),
329
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cdf-checkbox-group", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cdf-checkbox-label", children: [
330
- /* @__PURE__ */ jsxRuntime.jsx(
331
- "input",
332
- {
333
- type: "checkbox",
334
- value: option,
335
- ...register(name),
336
- className: "cdf-checkbox-input"
337
- }
338
- ),
339
- option
340
- ] }, option)) }),
341
- error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cdf-error-message", children: [
455
+ /* @__PURE__ */ jsxRuntime.jsx(
456
+ "div",
457
+ {
458
+ className: cx(
459
+ "cdf-checkbox-group",
460
+ globalClasses.checkboxGroup,
461
+ localClasses.checkboxGroup
462
+ ),
463
+ children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
464
+ "label",
465
+ {
466
+ className: cx(
467
+ "cdf-checkbox-label",
468
+ globalClasses.checkboxLabel,
469
+ localClasses.checkboxLabel
470
+ ),
471
+ children: [
472
+ /* @__PURE__ */ jsxRuntime.jsx(
473
+ "input",
474
+ {
475
+ type: "checkbox",
476
+ value: option,
477
+ ...register(name),
478
+ className: cx(
479
+ "cdf-checkbox-input",
480
+ globalClasses.checkboxInput,
481
+ localClasses.checkboxInput
482
+ )
483
+ }
484
+ ),
485
+ option
486
+ ]
487
+ },
488
+ option
489
+ ))
490
+ }
491
+ ),
492
+ error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx("cdf-error-message", globalClasses.errorText, localClasses.errorText), children: [
342
493
  /* @__PURE__ */ jsxRuntime.jsxs(
343
494
  "svg",
344
495
  {
@@ -359,7 +510,9 @@ var CheckboxGroupField = ({
359
510
  ] })
360
511
  ] });
361
512
  };
362
- var FileField = ({ name, schema, isRequired }) => {
513
+ var FileField = ({ name, schema, uiSchema, isRequired }) => {
514
+ const globalClasses = useClassNames();
515
+ const localClasses = (uiSchema == null ? void 0 : uiSchema["ui:classNames"]) || {};
363
516
  const {
364
517
  setValue,
365
518
  formState: { errors }
@@ -382,23 +535,36 @@ var FileField = ({ name, schema, isRequired }) => {
382
535
  };
383
536
  reader.readAsDataURL(file);
384
537
  };
385
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdf-field-group", children: [
386
- /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cdf-label", children: [
538
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("cdf-field-group", globalClasses.fieldGroup, localClasses.fieldGroup), children: [
539
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx("cdf-label", globalClasses.label, localClasses.label), children: [
387
540
  schema.title || name,
388
541
  isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdf-required-mark", children: "*" })
389
542
  ] }),
390
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `cdf-file-wrapper ${error ? "cdf-input--error" : ""}`, children: [
391
- /* @__PURE__ */ jsxRuntime.jsx("input", { type: "file", className: "cdf-file-input", onChange: handleFileChange }),
392
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdf-file-text", children: [
393
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Click to upload" }),
394
- " or drag and drop"
395
- ] }),
396
- fileName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdf-file-preview", children: [
397
- "Selected: ",
398
- /* @__PURE__ */ jsxRuntime.jsx("strong", { children: fileName })
399
- ] })
400
- ] }),
401
- error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cdf-error-message", children: [
543
+ /* @__PURE__ */ jsxRuntime.jsxs(
544
+ "div",
545
+ {
546
+ className: cx(
547
+ "cdf-file-wrapper",
548
+ globalClasses.fileWrapper,
549
+ localClasses.fileWrapper,
550
+ error && "cdf-input--error",
551
+ error && globalClasses.inputError,
552
+ error && localClasses.inputError
553
+ ),
554
+ children: [
555
+ /* @__PURE__ */ jsxRuntime.jsx("input", { type: "file", className: "cdf-file-input", onChange: handleFileChange }),
556
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("cdf-file-text", globalClasses.fileText, localClasses.fileText), children: [
557
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Click to upload" }),
558
+ " or drag and drop"
559
+ ] }),
560
+ fileName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdf-file-preview", children: [
561
+ "Selected: ",
562
+ /* @__PURE__ */ jsxRuntime.jsx("strong", { children: fileName })
563
+ ] })
564
+ ]
565
+ }
566
+ ),
567
+ error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx("cdf-error-message", globalClasses.errorText, localClasses.errorText), children: [
402
568
  /* @__PURE__ */ jsxRuntime.jsxs(
403
569
  "svg",
404
570
  {
@@ -429,31 +595,39 @@ var FieldRenderer = ({
429
595
  const widget = uiSchema == null ? void 0 : uiSchema["ui:widget"];
430
596
  const renderField = () => {
431
597
  if (schema.type === "array") {
432
- return /* @__PURE__ */ jsxRuntime.jsx(CheckboxGroupField, { name, schema, isRequired });
598
+ return /* @__PURE__ */ jsxRuntime.jsx(
599
+ CheckboxGroupField,
600
+ {
601
+ name,
602
+ schema,
603
+ uiSchema,
604
+ isRequired
605
+ }
606
+ );
433
607
  }
434
608
  if (schema.type === "boolean") {
435
- return /* @__PURE__ */ jsxRuntime.jsx(CheckboxField, { name, schema, isRequired });
609
+ return /* @__PURE__ */ jsxRuntime.jsx(CheckboxField, { name, schema, uiSchema, isRequired });
436
610
  }
437
611
  if (schema.enum) {
438
612
  if (widget === "radio") {
439
- return /* @__PURE__ */ jsxRuntime.jsx(RadioField, { name, schema, isRequired });
613
+ return /* @__PURE__ */ jsxRuntime.jsx(RadioField, { name, schema, uiSchema, isRequired });
440
614
  }
441
- return /* @__PURE__ */ jsxRuntime.jsx(SelectField, { name, schema, isRequired });
615
+ return /* @__PURE__ */ jsxRuntime.jsx(SelectField, { name, schema, uiSchema, isRequired });
442
616
  }
443
617
  if (schema.type === "string") {
444
618
  if (schema.format === "data-url") {
445
- return /* @__PURE__ */ jsxRuntime.jsx(FileField, { name, schema, isRequired });
619
+ return /* @__PURE__ */ jsxRuntime.jsx(FileField, { name, schema, uiSchema, isRequired });
446
620
  }
447
621
  if (schema.format === "password") {
448
- return /* @__PURE__ */ jsxRuntime.jsx(PasswordField, { name, schema, isRequired });
622
+ return /* @__PURE__ */ jsxRuntime.jsx(PasswordField, { name, schema, uiSchema, isRequired });
449
623
  }
450
624
  if (schema.format === "rich-text") {
451
- return /* @__PURE__ */ jsxRuntime.jsx(RichTextField, { name, schema, isRequired });
625
+ return /* @__PURE__ */ jsxRuntime.jsx(RichTextField, { name, schema, uiSchema, isRequired });
452
626
  }
453
- return /* @__PURE__ */ jsxRuntime.jsx(TextField, { name, schema, isRequired });
627
+ return /* @__PURE__ */ jsxRuntime.jsx(TextField, { name, schema, uiSchema, isRequired });
454
628
  }
455
629
  if (schema.type === "number" || schema.type === "integer") {
456
- return /* @__PURE__ */ jsxRuntime.jsx(NumberField, { name, schema, isRequired });
630
+ return /* @__PURE__ */ jsxRuntime.jsx(NumberField, { name, schema, uiSchema, isRequired });
457
631
  }
458
632
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cdf-field-group", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "cdf-error-message", children: [
459
633
  "Unsupported field type: ",
@@ -468,7 +642,8 @@ var SchemaForm = ({
468
642
  onSubmit,
469
643
  defaultValues,
470
644
  columns = 1,
471
- theme
645
+ theme,
646
+ classNames = {}
472
647
  }) => {
473
648
  const methods = reactHookForm.useForm({
474
649
  resolver: ajv.ajvResolver(schema, {
@@ -492,10 +667,17 @@ var SchemaForm = ({
492
667
  "--cdf-surface": theme.surface,
493
668
  "--cdf-border": theme.border
494
669
  } : {};
495
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdf-form-container", style: themeStyles, children: [
496
- schema.title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "cdf-form-title", children: schema.title }),
497
- schema.description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--cdf-text-muted)", marginBottom: "1.5rem" }, children: schema.description }),
498
- /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: methods.handleSubmit(onSubmit), noValidate: true, children: [
670
+ return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("cdf-form-container", classNames.container), style: themeStyles, children: [
671
+ schema.title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cx("cdf-form-title", classNames.title), children: schema.title }),
672
+ schema.description && /* @__PURE__ */ jsxRuntime.jsx(
673
+ "p",
674
+ {
675
+ className: classNames.description,
676
+ style: { color: "var(--cdf-text-muted)", marginBottom: "1.5rem" },
677
+ children: schema.description
678
+ }
679
+ ),
680
+ /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { className: classNames.form, onSubmit: methods.handleSubmit(onSubmit), noValidate: true, children: [
499
681
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `cdf-form-grid-${columns}`, children: Object.entries(schema.properties).map(([key, propSchema]) => {
500
682
  var _a;
501
683
  return /* @__PURE__ */ jsxRuntime.jsx(
@@ -509,9 +691,9 @@ var SchemaForm = ({
509
691
  key
510
692
  );
511
693
  }) }),
512
- /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: "cdf-submit-btn", children: "Submit" })
694
+ /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: cx("cdf-submit-btn", classNames.submitButton), children: "Submit" })
513
695
  ] }) })
514
- ] });
696
+ ] }) });
515
697
  };
516
698
 
517
699
  exports.FieldRenderer = FieldRenderer;