@fragno-dev/jsonforms-shadcn-renderers 0.0.0 → 0.0.1

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 (6) hide show
  1. package/README.md +4 -4
  2. package/dist/index.d.ts +67 -17
  3. package/dist/index.d.ts.map +1 -1
  4. package/dist/index.js +242 -85
  5. package/dist/index.js.map +1 -1
  6. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Generate, and, categorizationHasCategory, findUISchema, isBooleanControl, isDateControl, isDateTimeControl, isEnumControl, isIntegerControl, isNumberControl, isObjectControl, isOneOfEnumControl, isRangeControl, isStringControl, isTimeControl, optionIs, rankWith, uiTypeIs } from "@jsonforms/core";
2
- import { JsonFormsDispatch, withJsonFormsCellProps, withJsonFormsControlProps, withJsonFormsDetailProps, withJsonFormsEnumCellProps, withJsonFormsEnumProps, withJsonFormsLayoutProps, withJsonFormsOneOfEnumCellProps, withJsonFormsOneOfEnumProps } from "@jsonforms/react";
2
+ import { JsonFormsDispatch, withJsonFormsCellProps, withJsonFormsControlProps, withJsonFormsDetailProps, withJsonFormsEnumCellProps, withJsonFormsEnumProps, withJsonFormsLabelProps, withJsonFormsLayoutProps, withJsonFormsOneOfEnumCellProps, withJsonFormsOneOfEnumProps } from "@jsonforms/react";
3
3
  import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldSeparator, FieldSet } from "@/components/ui/field";
4
- import { Fragment, memo, useMemo, useState } from "react";
4
+ import { Fragment, memo, useCallback, useMemo, useState } from "react";
5
5
  import { Checkbox } from "@/components/ui/checkbox";
6
6
  import { jsx, jsxs } from "react/jsx-runtime";
7
7
  import { Switch } from "@/components/ui/switch";
@@ -30,14 +30,46 @@ const ShadcnCheckbox = memo(function ShadcnCheckbox$1(props) {
30
30
  });
31
31
  });
32
32
 
33
+ //#endregion
34
+ //#region src/hooks/useTouched.ts
35
+ /**
36
+ * Hook to track whether a field has been touched and should show errors.
37
+ *
38
+ * Errors should be shown if:
39
+ * - The field has been touched (user changed the value at least once)
40
+ * - OR the field has a value (handles pre-filled/auto-filled forms)
41
+ *
42
+ * @param data - The current field value
43
+ * @returns showErrors - Whether to display validation errors
44
+ * @returns markTouched - Callback to mark the field as touched
45
+ */
46
+ function useTouched(data) {
47
+ const [touched, setTouched] = useState(false);
48
+ return {
49
+ showErrors: useMemo(() => {
50
+ if (touched) return true;
51
+ if (data === void 0 || data === null || data === "") return false;
52
+ return true;
53
+ }, [touched, data]),
54
+ markTouched: useCallback(() => {
55
+ setTouched(true);
56
+ }, [])
57
+ };
58
+ }
59
+
33
60
  //#endregion
34
61
  //#region src/controls/ShadcnBooleanControl.tsx
35
- const ShadcnBooleanControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description }) => {
62
+ const ShadcnBooleanControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description, required }) => {
63
+ const { showErrors, markTouched } = useTouched(data);
36
64
  const isValid = errors.length === 0;
37
65
  if (!visible) return null;
66
+ const handleChangeWithTouch = (path$1, value) => {
67
+ markTouched();
68
+ handleChange(path$1, value);
69
+ };
38
70
  return /* @__PURE__ */ jsxs(Field, {
39
71
  orientation: "horizontal",
40
- "data-invalid": !isValid || void 0,
72
+ "data-invalid": !isValid && showErrors || void 0,
41
73
  "data-disabled": !enabled || void 0,
42
74
  children: [/* @__PURE__ */ jsx(ShadcnCheckbox, {
43
75
  id: `${id}-input`,
@@ -48,17 +80,20 @@ const ShadcnBooleanControl = ({ data, visible, label, id, enabled, uischema, sch
48
80
  uischema,
49
81
  schema,
50
82
  rootSchema,
51
- handleChange,
83
+ handleChange: handleChangeWithTouch,
52
84
  errors,
53
85
  config,
54
86
  isValid
55
87
  }), /* @__PURE__ */ jsxs(FieldContent, { children: [
56
- /* @__PURE__ */ jsx(FieldLabel, {
88
+ /* @__PURE__ */ jsxs(FieldLabel, {
57
89
  htmlFor: `${id}-input`,
58
- children: label
90
+ children: [label, required && /* @__PURE__ */ jsx("span", {
91
+ className: "ml-0.5 text-red-500",
92
+ children: "*"
93
+ })]
59
94
  }),
60
95
  description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
61
- !isValid && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
96
+ !isValid && showErrors && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
62
97
  ] })]
63
98
  });
64
99
  };
@@ -80,12 +115,17 @@ const ShadcnSwitch = memo(function ShadcnSwitch$1(props) {
80
115
 
81
116
  //#endregion
82
117
  //#region src/controls/ShadcnBooleanToggleControl.tsx
83
- const ShadcnBooleanToggleControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description }) => {
118
+ const ShadcnBooleanToggleControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description, required }) => {
119
+ const { showErrors, markTouched } = useTouched(data);
84
120
  const isValid = errors.length === 0;
85
121
  if (!visible) return null;
122
+ const handleChangeWithTouch = (path$1, value) => {
123
+ markTouched();
124
+ handleChange(path$1, value);
125
+ };
86
126
  return /* @__PURE__ */ jsxs(Field, {
87
127
  orientation: "horizontal",
88
- "data-invalid": !isValid || void 0,
128
+ "data-invalid": !isValid && showErrors || void 0,
89
129
  "data-disabled": !enabled || void 0,
90
130
  children: [/* @__PURE__ */ jsx(ShadcnSwitch, {
91
131
  id: `${id}-input`,
@@ -96,17 +136,20 @@ const ShadcnBooleanToggleControl = ({ data, visible, label, id, enabled, uischem
96
136
  uischema,
97
137
  schema,
98
138
  rootSchema,
99
- handleChange,
139
+ handleChange: handleChangeWithTouch,
100
140
  errors,
101
141
  config,
102
142
  isValid
103
143
  }), /* @__PURE__ */ jsxs(FieldContent, { children: [
104
- /* @__PURE__ */ jsx(FieldLabel, {
144
+ /* @__PURE__ */ jsxs(FieldLabel, {
105
145
  htmlFor: `${id}-input`,
106
- children: label
146
+ children: [label, required && /* @__PURE__ */ jsx("span", {
147
+ className: "ml-0.5 text-red-500",
148
+ children: "*"
149
+ })]
107
150
  }),
108
151
  description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
109
- !isValid && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
152
+ !isValid && showErrors && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
110
153
  ] })]
111
154
  });
112
155
  };
@@ -116,7 +159,7 @@ const ShadcnBooleanToggleControlContext = withJsonFormsControlProps(ShadcnBoolea
116
159
  //#endregion
117
160
  //#region src/shadcn-controls/ShadcnInput.tsx
118
161
  const ShadcnInput = memo(function ShadcnInput$1(props) {
119
- const { data, className, id, enabled, path, handleChange, schema } = props;
162
+ const { data, className, id, enabled, path, handleChange, schema, placeholder } = props;
120
163
  return /* @__PURE__ */ jsx(Input, {
121
164
  type: "text",
122
165
  value: data ?? "",
@@ -124,22 +167,32 @@ const ShadcnInput = memo(function ShadcnInput$1(props) {
124
167
  className,
125
168
  id,
126
169
  disabled: !enabled,
127
- maxLength: schema.maxLength
170
+ maxLength: schema.maxLength,
171
+ placeholder
128
172
  });
129
173
  });
130
174
 
131
175
  //#endregion
132
176
  //#region src/controls/ShadcnTextControl.tsx
133
- const ShadcnTextControl = ({ data, visible, label, id, enabled, schema, handleChange, errors, path, description }) => {
177
+ const ShadcnTextControl = ({ data, visible, label, id, enabled, schema, handleChange, errors, path, description, uischema, required }) => {
178
+ const { showErrors, markTouched } = useTouched(data);
134
179
  const isValid = errors.length === 0;
135
180
  if (!visible) return null;
181
+ const placeholder = uischema.options?.["placeholder"];
182
+ const handleChangeWithTouch = (path$1, value) => {
183
+ markTouched();
184
+ handleChange(path$1, value);
185
+ };
136
186
  return /* @__PURE__ */ jsxs(Field, {
137
- "data-invalid": !isValid || void 0,
187
+ "data-invalid": !isValid && showErrors || void 0,
138
188
  "data-disabled": !enabled || void 0,
139
189
  children: [
140
- /* @__PURE__ */ jsx(FieldLabel, {
190
+ /* @__PURE__ */ jsxs(FieldLabel, {
141
191
  htmlFor: `${id}-input`,
142
- children: label
192
+ children: [label, required && /* @__PURE__ */ jsx("span", {
193
+ className: "ml-0.5 text-red-500",
194
+ children: "*"
195
+ })]
143
196
  }),
144
197
  description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
145
198
  /* @__PURE__ */ jsx(ShadcnInput, {
@@ -148,9 +201,10 @@ const ShadcnTextControl = ({ data, visible, label, id, enabled, schema, handleCh
148
201
  enabled,
149
202
  path,
150
203
  schema,
151
- handleChange
204
+ handleChange: handleChangeWithTouch,
205
+ placeholder
152
206
  }),
153
- !isValid && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
207
+ !isValid && showErrors && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
154
208
  ]
155
209
  });
156
210
  };
@@ -160,29 +214,39 @@ const ShadcnTextControlContext = withJsonFormsControlProps(ShadcnTextControl);
160
214
  //#endregion
161
215
  //#region src/shadcn-controls/ShadcnTextarea.tsx
162
216
  const ShadcnTextarea = memo(function ShadcnTextarea$1(props) {
163
- const { data, className, id, enabled, path, handleChange, schema } = props;
217
+ const { data, className, id, enabled, path, handleChange, schema, placeholder } = props;
164
218
  return /* @__PURE__ */ jsx(Textarea, {
165
219
  value: data ?? "",
166
220
  onChange: (e) => handleChange(path, e.target.value || void 0),
167
221
  className,
168
222
  id,
169
223
  disabled: !enabled,
170
- maxLength: schema.maxLength
224
+ maxLength: schema.maxLength,
225
+ placeholder
171
226
  });
172
227
  });
173
228
 
174
229
  //#endregion
175
230
  //#region src/controls/ShadcnTextAreaControl.tsx
176
- const ShadcnTextAreaControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description }) => {
231
+ const ShadcnTextAreaControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description, required }) => {
232
+ const { showErrors, markTouched } = useTouched(data);
177
233
  const isValid = errors.length === 0;
178
234
  if (!visible) return null;
235
+ const placeholder = uischema.options?.["placeholder"];
236
+ const handleChangeWithTouch = (path$1, value) => {
237
+ markTouched();
238
+ handleChange(path$1, value);
239
+ };
179
240
  return /* @__PURE__ */ jsxs(Field, {
180
- "data-invalid": !isValid || void 0,
241
+ "data-invalid": !isValid && showErrors || void 0,
181
242
  "data-disabled": !enabled || void 0,
182
243
  children: [
183
- /* @__PURE__ */ jsx(FieldLabel, {
244
+ /* @__PURE__ */ jsxs(FieldLabel, {
184
245
  htmlFor: `${id}-input`,
185
- children: label
246
+ children: [label, required && /* @__PURE__ */ jsx("span", {
247
+ className: "ml-0.5 text-red-500",
248
+ children: "*"
249
+ })]
186
250
  }),
187
251
  description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
188
252
  /* @__PURE__ */ jsx(ShadcnTextarea, {
@@ -194,12 +258,13 @@ const ShadcnTextAreaControl = ({ data, visible, label, id, enabled, uischema, sc
194
258
  uischema,
195
259
  schema,
196
260
  rootSchema,
197
- handleChange,
261
+ handleChange: handleChangeWithTouch,
198
262
  errors,
199
263
  config,
200
- isValid
264
+ isValid,
265
+ placeholder
201
266
  }),
202
- !isValid && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
267
+ !isValid && showErrors && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
203
268
  ]
204
269
  });
205
270
  };
@@ -284,16 +349,24 @@ const ShadcnDatePicker = memo(function ShadcnDatePicker$1(props) {
284
349
 
285
350
  //#endregion
286
351
  //#region src/controls/ShadcnDateControl.tsx
287
- const ShadcnDateControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description }) => {
352
+ const ShadcnDateControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description, required }) => {
353
+ const { showErrors, markTouched } = useTouched(data);
288
354
  const isValid = errors.length === 0;
289
355
  if (!visible) return null;
356
+ const handleChangeWithTouch = (path$1, value) => {
357
+ markTouched();
358
+ handleChange(path$1, value);
359
+ };
290
360
  return /* @__PURE__ */ jsxs(Field, {
291
- "data-invalid": !isValid || void 0,
361
+ "data-invalid": !isValid && showErrors || void 0,
292
362
  "data-disabled": !enabled || void 0,
293
363
  children: [
294
- /* @__PURE__ */ jsx(FieldLabel, {
364
+ /* @__PURE__ */ jsxs(FieldLabel, {
295
365
  htmlFor: `${id}-input`,
296
- children: label
366
+ children: [label, required && /* @__PURE__ */ jsx("span", {
367
+ className: "ml-0.5 text-red-500",
368
+ children: "*"
369
+ })]
297
370
  }),
298
371
  description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
299
372
  /* @__PURE__ */ jsx(ShadcnDatePicker, {
@@ -305,12 +378,12 @@ const ShadcnDateControl = ({ data, visible, label, id, enabled, uischema, schema
305
378
  uischema,
306
379
  schema,
307
380
  rootSchema,
308
- handleChange,
381
+ handleChange: handleChangeWithTouch,
309
382
  errors,
310
383
  config,
311
384
  isValid
312
385
  }),
313
- !isValid && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
386
+ !isValid && showErrors && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
314
387
  ]
315
388
  });
316
389
  };
@@ -333,16 +406,24 @@ const ShadcnTimePicker = memo(function ShadcnTimePicker$1(props) {
333
406
 
334
407
  //#endregion
335
408
  //#region src/controls/ShadcnTimeControl.tsx
336
- const ShadcnTimeControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description }) => {
409
+ const ShadcnTimeControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description, required }) => {
410
+ const { showErrors, markTouched } = useTouched(data);
337
411
  const isValid = errors.length === 0;
338
412
  if (!visible) return null;
413
+ const handleChangeWithTouch = (path$1, value) => {
414
+ markTouched();
415
+ handleChange(path$1, value);
416
+ };
339
417
  return /* @__PURE__ */ jsxs(Field, {
340
- "data-invalid": !isValid || void 0,
418
+ "data-invalid": !isValid && showErrors || void 0,
341
419
  "data-disabled": !enabled || void 0,
342
420
  children: [
343
- /* @__PURE__ */ jsx(FieldLabel, {
421
+ /* @__PURE__ */ jsxs(FieldLabel, {
344
422
  htmlFor: `${id}-input`,
345
- children: label
423
+ children: [label, required && /* @__PURE__ */ jsx("span", {
424
+ className: "ml-0.5 text-red-500",
425
+ children: "*"
426
+ })]
346
427
  }),
347
428
  description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
348
429
  /* @__PURE__ */ jsx(ShadcnTimePicker, {
@@ -354,12 +435,12 @@ const ShadcnTimeControl = ({ data, visible, label, id, enabled, uischema, schema
354
435
  uischema,
355
436
  schema,
356
437
  rootSchema,
357
- handleChange,
438
+ handleChange: handleChangeWithTouch,
358
439
  errors,
359
440
  config,
360
441
  isValid
361
442
  }),
362
- !isValid && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
443
+ !isValid && showErrors && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
363
444
  ]
364
445
  });
365
446
  };
@@ -438,16 +519,24 @@ const ShadcnDateTimePicker = memo(function ShadcnDateTimePicker$1(props) {
438
519
 
439
520
  //#endregion
440
521
  //#region src/controls/ShadcnDateTimeControl.tsx
441
- const ShadcnDateTimeControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description }) => {
522
+ const ShadcnDateTimeControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description, required }) => {
523
+ const { showErrors, markTouched } = useTouched(data);
442
524
  const isValid = errors.length === 0;
443
525
  if (!visible) return null;
526
+ const handleChangeWithTouch = (path$1, value) => {
527
+ markTouched();
528
+ handleChange(path$1, value);
529
+ };
444
530
  return /* @__PURE__ */ jsxs(Field, {
445
- "data-invalid": !isValid || void 0,
531
+ "data-invalid": !isValid && showErrors || void 0,
446
532
  "data-disabled": !enabled || void 0,
447
533
  children: [
448
- /* @__PURE__ */ jsx(FieldLabel, {
534
+ /* @__PURE__ */ jsxs(FieldLabel, {
449
535
  htmlFor: `${id}-input`,
450
- children: label
536
+ children: [label, required && /* @__PURE__ */ jsx("span", {
537
+ className: "ml-0.5 text-red-500",
538
+ children: "*"
539
+ })]
451
540
  }),
452
541
  description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
453
542
  /* @__PURE__ */ jsx(ShadcnDateTimePicker, {
@@ -459,12 +548,12 @@ const ShadcnDateTimeControl = ({ data, visible, label, id, enabled, uischema, sc
459
548
  uischema,
460
549
  schema,
461
550
  rootSchema,
462
- handleChange,
551
+ handleChange: handleChangeWithTouch,
463
552
  errors,
464
553
  config,
465
554
  isValid
466
555
  }),
467
- !isValid && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
556
+ !isValid && showErrors && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
468
557
  ]
469
558
  });
470
559
  };
@@ -498,16 +587,24 @@ const ShadcnNumberInput = memo(function ShadcnNumberInput$1(props) {
498
587
 
499
588
  //#endregion
500
589
  //#region src/controls/ShadcnIntegerControl.tsx
501
- const ShadcnIntegerControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description }) => {
590
+ const ShadcnIntegerControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description, required }) => {
591
+ const { showErrors, markTouched } = useTouched(data);
502
592
  const isValid = errors.length === 0;
503
593
  if (!visible) return null;
594
+ const handleChangeWithTouch = (path$1, value) => {
595
+ markTouched();
596
+ handleChange(path$1, value);
597
+ };
504
598
  return /* @__PURE__ */ jsxs(Field, {
505
- "data-invalid": !isValid || void 0,
599
+ "data-invalid": !isValid && showErrors || void 0,
506
600
  "data-disabled": !enabled || void 0,
507
601
  children: [
508
- /* @__PURE__ */ jsx(FieldLabel, {
602
+ /* @__PURE__ */ jsxs(FieldLabel, {
509
603
  htmlFor: `${id}-input`,
510
- children: label
604
+ children: [label, required && /* @__PURE__ */ jsx("span", {
605
+ className: "ml-0.5 text-red-500",
606
+ children: "*"
607
+ })]
511
608
  }),
512
609
  description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
513
610
  /* @__PURE__ */ jsx(ShadcnNumberInput, {
@@ -519,13 +616,13 @@ const ShadcnIntegerControl = ({ data, visible, label, id, enabled, uischema, sch
519
616
  uischema,
520
617
  schema,
521
618
  rootSchema,
522
- handleChange,
619
+ handleChange: handleChangeWithTouch,
523
620
  errors,
524
621
  config,
525
622
  isValid,
526
623
  step: "1"
527
624
  }),
528
- !isValid && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
625
+ !isValid && showErrors && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
529
626
  ]
530
627
  });
531
628
  };
@@ -534,16 +631,24 @@ const ShadcnIntegerControlContext = withJsonFormsControlProps(ShadcnIntegerContr
534
631
 
535
632
  //#endregion
536
633
  //#region src/controls/ShadcnNumberControl.tsx
537
- const ShadcnNumberControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description }) => {
634
+ const ShadcnNumberControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description, required }) => {
635
+ const { showErrors, markTouched } = useTouched(data);
538
636
  const isValid = errors.length === 0;
539
637
  if (!visible) return null;
638
+ const handleChangeWithTouch = (path$1, value) => {
639
+ markTouched();
640
+ handleChange(path$1, value);
641
+ };
540
642
  return /* @__PURE__ */ jsxs(Field, {
541
- "data-invalid": !isValid || void 0,
643
+ "data-invalid": !isValid && showErrors || void 0,
542
644
  "data-disabled": !enabled || void 0,
543
645
  children: [
544
- /* @__PURE__ */ jsx(FieldLabel, {
646
+ /* @__PURE__ */ jsxs(FieldLabel, {
545
647
  htmlFor: `${id}-input`,
546
- children: label
648
+ children: [label, required && /* @__PURE__ */ jsx("span", {
649
+ className: "ml-0.5 text-red-500",
650
+ children: "*"
651
+ })]
547
652
  }),
548
653
  description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
549
654
  /* @__PURE__ */ jsx(ShadcnNumberInput, {
@@ -555,12 +660,12 @@ const ShadcnNumberControl = ({ data, visible, label, id, enabled, uischema, sche
555
660
  uischema,
556
661
  schema,
557
662
  rootSchema,
558
- handleChange,
663
+ handleChange: handleChangeWithTouch,
559
664
  errors,
560
665
  config,
561
666
  isValid
562
667
  }),
563
- !isValid && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
668
+ !isValid && showErrors && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
564
669
  ]
565
670
  });
566
671
  };
@@ -588,16 +693,24 @@ const ShadcnSelect = memo(function ShadcnSelect$1(props) {
588
693
 
589
694
  //#endregion
590
695
  //#region src/controls/ShadcnEnumControl.tsx
591
- const ShadcnEnumControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description, options }) => {
696
+ const ShadcnEnumControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description, options, required }) => {
697
+ const { showErrors, markTouched } = useTouched(data);
592
698
  const isValid = errors.length === 0;
593
699
  if (!visible) return null;
700
+ const handleChangeWithTouch = (path$1, value) => {
701
+ markTouched();
702
+ handleChange(path$1, value);
703
+ };
594
704
  return /* @__PURE__ */ jsxs(Field, {
595
- "data-invalid": !isValid || void 0,
705
+ "data-invalid": !isValid && showErrors || void 0,
596
706
  "data-disabled": !enabled || void 0,
597
707
  children: [
598
- /* @__PURE__ */ jsx(FieldLabel, {
708
+ /* @__PURE__ */ jsxs(FieldLabel, {
599
709
  htmlFor: `${id}-input`,
600
- children: label
710
+ children: [label, required && /* @__PURE__ */ jsx("span", {
711
+ className: "ml-0.5 text-red-500",
712
+ children: "*"
713
+ })]
601
714
  }),
602
715
  description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
603
716
  /* @__PURE__ */ jsx(ShadcnSelect, {
@@ -609,13 +722,13 @@ const ShadcnEnumControl = ({ data, visible, label, id, enabled, uischema, schema
609
722
  uischema,
610
723
  schema,
611
724
  rootSchema,
612
- handleChange,
725
+ handleChange: handleChangeWithTouch,
613
726
  errors,
614
727
  config,
615
728
  isValid,
616
729
  options: options ?? []
617
730
  }),
618
- !isValid && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
731
+ !isValid && showErrors && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
619
732
  ]
620
733
  });
621
734
  };
@@ -650,14 +763,22 @@ const ShadcnRadioGroup = memo(function ShadcnRadioGroup$1(props) {
650
763
 
651
764
  //#endregion
652
765
  //#region src/controls/ShadcnEnumRadioControl.tsx
653
- const ShadcnEnumRadioControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description, options }) => {
766
+ const ShadcnEnumRadioControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description, options, required }) => {
767
+ const { showErrors, markTouched } = useTouched(data);
654
768
  const isValid = errors.length === 0;
655
769
  if (!visible) return null;
770
+ const handleChangeWithTouch = (path$1, value) => {
771
+ markTouched();
772
+ handleChange(path$1, value);
773
+ };
656
774
  return /* @__PURE__ */ jsxs(Field, {
657
- "data-invalid": !isValid || void 0,
775
+ "data-invalid": !isValid && showErrors || void 0,
658
776
  "data-disabled": !enabled || void 0,
659
777
  children: [
660
- /* @__PURE__ */ jsx(FieldLabel, { children: label }),
778
+ /* @__PURE__ */ jsxs(FieldLabel, { children: [label, required && /* @__PURE__ */ jsx("span", {
779
+ className: "ml-0.5 text-red-500",
780
+ children: "*"
781
+ })] }),
661
782
  description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
662
783
  /* @__PURE__ */ jsx(ShadcnRadioGroup, {
663
784
  id: `${id}-input`,
@@ -668,13 +789,13 @@ const ShadcnEnumRadioControl = ({ data, visible, label, id, enabled, uischema, s
668
789
  uischema,
669
790
  schema,
670
791
  rootSchema,
671
- handleChange,
792
+ handleChange: handleChangeWithTouch,
672
793
  errors,
673
794
  config,
674
795
  isValid,
675
796
  options: options ?? []
676
797
  }),
677
- !isValid && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
798
+ !isValid && showErrors && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
678
799
  ]
679
800
  });
680
801
  };
@@ -683,16 +804,24 @@ const ShadcnEnumRadioControlContext = withJsonFormsEnumProps(ShadcnEnumRadioCont
683
804
 
684
805
  //#endregion
685
806
  //#region src/controls/ShadcnOneOfEnumControl.tsx
686
- const ShadcnOneOfEnumControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description, options }) => {
807
+ const ShadcnOneOfEnumControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description, options, required }) => {
808
+ const { showErrors, markTouched } = useTouched(data);
687
809
  const isValid = errors.length === 0;
688
810
  if (!visible) return null;
811
+ const handleChangeWithTouch = (path$1, value) => {
812
+ markTouched();
813
+ handleChange(path$1, value);
814
+ };
689
815
  return /* @__PURE__ */ jsxs(Field, {
690
- "data-invalid": !isValid || void 0,
816
+ "data-invalid": !isValid && showErrors || void 0,
691
817
  "data-disabled": !enabled || void 0,
692
818
  children: [
693
- /* @__PURE__ */ jsx(FieldLabel, {
819
+ /* @__PURE__ */ jsxs(FieldLabel, {
694
820
  htmlFor: `${id}-input`,
695
- children: label
821
+ children: [label, required && /* @__PURE__ */ jsx("span", {
822
+ className: "ml-0.5 text-red-500",
823
+ children: "*"
824
+ })]
696
825
  }),
697
826
  description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
698
827
  /* @__PURE__ */ jsx(ShadcnSelect, {
@@ -704,13 +833,13 @@ const ShadcnOneOfEnumControl = ({ data, visible, label, id, enabled, uischema, s
704
833
  uischema,
705
834
  schema,
706
835
  rootSchema,
707
- handleChange,
836
+ handleChange: handleChangeWithTouch,
708
837
  errors,
709
838
  config,
710
839
  isValid,
711
840
  options: options ?? []
712
841
  }),
713
- !isValid && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
842
+ !isValid && showErrors && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
714
843
  ]
715
844
  });
716
845
  };
@@ -742,20 +871,28 @@ const ShadcnSlider = memo(function ShadcnSlider$1(props) {
742
871
 
743
872
  //#endregion
744
873
  //#region src/controls/ShadcnSliderControl.tsx
745
- const ShadcnSliderControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description }) => {
874
+ const ShadcnSliderControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description, required }) => {
875
+ const { showErrors, markTouched } = useTouched(data);
746
876
  const isValid = errors.length === 0;
747
877
  if (!visible) return null;
748
878
  const min = schema.minimum ?? 0;
749
879
  const max = schema.maximum ?? 100;
750
880
  const defaultValue = schema.default ?? min;
751
881
  const currentValue = data ?? defaultValue;
882
+ const handleChangeWithTouch = (path$1, value) => {
883
+ markTouched();
884
+ handleChange(path$1, value);
885
+ };
752
886
  return /* @__PURE__ */ jsxs(Field, {
753
- "data-invalid": !isValid || void 0,
887
+ "data-invalid": !isValid && showErrors || void 0,
754
888
  "data-disabled": !enabled || void 0,
755
889
  children: [
756
- /* @__PURE__ */ jsxs(FieldContent, { children: [/* @__PURE__ */ jsx(FieldLabel, {
890
+ /* @__PURE__ */ jsxs(FieldContent, { children: [/* @__PURE__ */ jsxs(FieldLabel, {
757
891
  htmlFor: `${id}-input`,
758
- children: label
892
+ children: [label, required && /* @__PURE__ */ jsx("span", {
893
+ className: "ml-0.5 text-red-500",
894
+ children: "*"
895
+ })]
759
896
  }), description && /* @__PURE__ */ jsx(FieldDescription, { children: description })] }),
760
897
  /* @__PURE__ */ jsxs("div", {
761
898
  className: "flex items-center justify-between",
@@ -773,7 +910,7 @@ const ShadcnSliderControl = ({ data, visible, label, id, enabled, uischema, sche
773
910
  uischema,
774
911
  schema,
775
912
  rootSchema,
776
- handleChange,
913
+ handleChange: handleChangeWithTouch,
777
914
  errors,
778
915
  config,
779
916
  isValid
@@ -782,7 +919,7 @@ const ShadcnSliderControl = ({ data, visible, label, id, enabled, uischema, sche
782
919
  className: "text-muted-foreground flex justify-between text-xs",
783
920
  children: [/* @__PURE__ */ jsx("span", { children: min }), /* @__PURE__ */ jsx("span", { children: max })]
784
921
  }),
785
- !isValid && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
922
+ !isValid && showErrors && /* @__PURE__ */ jsx(FieldError, { errors: [{ message: errors }] })
786
923
  ]
787
924
  });
788
925
  };
@@ -1100,6 +1237,22 @@ const ShadcnCategorizationStepperLayout = ({ uischema, schema, path, enabled, vi
1100
1237
  const shadcnCategorizationStepperLayoutTester = rankWith(2, and(uiTypeIs("Categorization"), categorizationHasCategory, optionIs("variant", "stepper")));
1101
1238
  const ShadcnCategorizationStepperLayoutContext = withJsonFormsLayoutProps(ShadcnCategorizationStepperLayout);
1102
1239
 
1240
+ //#endregion
1241
+ //#region src/additional/ShadcnLabelRenderer.tsx
1242
+ /**
1243
+ * Default tester for a label.
1244
+ */
1245
+ const shadcnLabelRendererTester = rankWith(1, uiTypeIs("Label"));
1246
+ /**
1247
+ * Default renderer for a label.
1248
+ * Renders static text without any associated data field.
1249
+ */
1250
+ const ShadcnLabelRenderer = ({ text, visible }) => {
1251
+ if (!visible) return null;
1252
+ return /* @__PURE__ */ jsx(Label, { children: text });
1253
+ };
1254
+ const ShadcnLabelRendererContext = withJsonFormsLabelProps(ShadcnLabelRenderer);
1255
+
1103
1256
  //#endregion
1104
1257
  //#region src/index.ts
1105
1258
  /**
@@ -1182,6 +1335,10 @@ const shadcnRenderers = [
1182
1335
  {
1183
1336
  tester: shadcnObjectControlTester,
1184
1337
  renderer: ShadcnObjectControlContext
1338
+ },
1339
+ {
1340
+ tester: shadcnLabelRendererTester,
1341
+ renderer: ShadcnLabelRendererContext
1185
1342
  }
1186
1343
  ];
1187
1344
  /** Shadcn cells for JSON Forms (lightweight renderers for tables/arrays). */
@@ -1237,5 +1394,5 @@ const shadcnCells = [
1237
1394
  ];
1238
1395
 
1239
1396
  //#endregion
1240
- export { ShadcnBooleanCell, ShadcnBooleanCellContext, ShadcnBooleanControl, ShadcnBooleanControlContext, ShadcnBooleanToggleCell, ShadcnBooleanToggleCellContext, ShadcnBooleanToggleControl, ShadcnBooleanToggleControlContext, ShadcnCategorizationLayout, ShadcnCategorizationLayoutContext, ShadcnCategorizationStepperLayout, ShadcnCategorizationStepperLayoutContext, ShadcnCheckbox, ShadcnDateCell, ShadcnDateCellContext, ShadcnDateControl, ShadcnDateControlContext, ShadcnDatePicker, ShadcnDateTimeCell, ShadcnDateTimeCellContext, ShadcnDateTimeControl, ShadcnDateTimeControlContext, ShadcnDateTimePicker, ShadcnEnumCell, ShadcnEnumCellContext, ShadcnEnumControl, ShadcnEnumControlContext, ShadcnEnumRadioCell, ShadcnEnumRadioCellContext, ShadcnEnumRadioControl, ShadcnEnumRadioControlContext, ShadcnGroupLayout, ShadcnGroupLayoutContext, ShadcnHorizontalLayout, ShadcnHorizontalLayoutContext, ShadcnInput, ShadcnIntegerCell, ShadcnIntegerCellContext, ShadcnIntegerControl, ShadcnIntegerControlContext, ShadcnNumberCell, ShadcnNumberCellContext, ShadcnNumberControl, ShadcnNumberControlContext, ShadcnNumberInput, ShadcnObjectControl, ShadcnObjectControlContext, ShadcnOneOfEnumCell, ShadcnOneOfEnumCellContext, ShadcnOneOfEnumControl, ShadcnOneOfEnumControlContext, ShadcnRadioGroup, ShadcnSelect, ShadcnSlider, ShadcnSliderCell, ShadcnSliderCellContext, ShadcnSliderControl, ShadcnSliderControlContext, ShadcnSwitch, ShadcnTextAreaControl, ShadcnTextAreaControlContext, ShadcnTextCell, ShadcnTextCellContext, ShadcnTextControl, ShadcnTextControlContext, ShadcnTextarea, ShadcnTimeCell, ShadcnTimeCellContext, ShadcnTimeControl, ShadcnTimeControlContext, ShadcnTimePicker, ShadcnVerticalLayout, ShadcnVerticalLayoutContext, shadcnBooleanCellTester, shadcnBooleanControlTester, shadcnBooleanToggleCellTester, shadcnBooleanToggleControlTester, shadcnCategorizationLayoutTester, shadcnCategorizationStepperLayoutTester, shadcnCells, shadcnDateCellTester, shadcnDateControlTester, shadcnDateTimeCellTester, shadcnDateTimeControlTester, shadcnEnumCellTester, shadcnEnumControlTester, shadcnEnumRadioCellTester, shadcnEnumRadioControlTester, shadcnGroupLayoutTester, shadcnHorizontalLayoutTester, shadcnIntegerCellTester, shadcnIntegerControlTester, shadcnNumberCellTester, shadcnNumberControlTester, shadcnObjectControlTester, shadcnOneOfEnumCellTester, shadcnOneOfEnumControlTester, shadcnRenderers, shadcnSliderCellTester, shadcnSliderControlTester, shadcnTextAreaControlTester, shadcnTextCellTester, shadcnTextControlTester, shadcnTimeCellTester, shadcnTimeControlTester, shadcnVerticalLayoutTester };
1397
+ export { ShadcnBooleanCell, ShadcnBooleanCellContext, ShadcnBooleanControl, ShadcnBooleanControlContext, ShadcnBooleanToggleCell, ShadcnBooleanToggleCellContext, ShadcnBooleanToggleControl, ShadcnBooleanToggleControlContext, ShadcnCategorizationLayout, ShadcnCategorizationLayoutContext, ShadcnCategorizationStepperLayout, ShadcnCategorizationStepperLayoutContext, ShadcnCheckbox, ShadcnDateCell, ShadcnDateCellContext, ShadcnDateControl, ShadcnDateControlContext, ShadcnDatePicker, ShadcnDateTimeCell, ShadcnDateTimeCellContext, ShadcnDateTimeControl, ShadcnDateTimeControlContext, ShadcnDateTimePicker, ShadcnEnumCell, ShadcnEnumCellContext, ShadcnEnumControl, ShadcnEnumControlContext, ShadcnEnumRadioCell, ShadcnEnumRadioCellContext, ShadcnEnumRadioControl, ShadcnEnumRadioControlContext, ShadcnGroupLayout, ShadcnGroupLayoutContext, ShadcnHorizontalLayout, ShadcnHorizontalLayoutContext, ShadcnInput, ShadcnIntegerCell, ShadcnIntegerCellContext, ShadcnIntegerControl, ShadcnIntegerControlContext, ShadcnLabelRenderer, ShadcnLabelRendererContext, ShadcnNumberCell, ShadcnNumberCellContext, ShadcnNumberControl, ShadcnNumberControlContext, ShadcnNumberInput, ShadcnObjectControl, ShadcnObjectControlContext, ShadcnOneOfEnumCell, ShadcnOneOfEnumCellContext, ShadcnOneOfEnumControl, ShadcnOneOfEnumControlContext, ShadcnRadioGroup, ShadcnSelect, ShadcnSlider, ShadcnSliderCell, ShadcnSliderCellContext, ShadcnSliderControl, ShadcnSliderControlContext, ShadcnSwitch, ShadcnTextAreaControl, ShadcnTextAreaControlContext, ShadcnTextCell, ShadcnTextCellContext, ShadcnTextControl, ShadcnTextControlContext, ShadcnTextarea, ShadcnTimeCell, ShadcnTimeCellContext, ShadcnTimeControl, ShadcnTimeControlContext, ShadcnTimePicker, ShadcnVerticalLayout, ShadcnVerticalLayoutContext, shadcnBooleanCellTester, shadcnBooleanControlTester, shadcnBooleanToggleCellTester, shadcnBooleanToggleControlTester, shadcnCategorizationLayoutTester, shadcnCategorizationStepperLayoutTester, shadcnCells, shadcnDateCellTester, shadcnDateControlTester, shadcnDateTimeCellTester, shadcnDateTimeControlTester, shadcnEnumCellTester, shadcnEnumControlTester, shadcnEnumRadioCellTester, shadcnEnumRadioControlTester, shadcnGroupLayoutTester, shadcnHorizontalLayoutTester, shadcnIntegerCellTester, shadcnIntegerControlTester, shadcnLabelRendererTester, shadcnNumberCellTester, shadcnNumberControlTester, shadcnObjectControlTester, shadcnOneOfEnumCellTester, shadcnOneOfEnumControlTester, shadcnRenderers, shadcnSliderCellTester, shadcnSliderControlTester, shadcnTextAreaControlTester, shadcnTextCellTester, shadcnTextControlTester, shadcnTimeCellTester, shadcnTimeControlTester, shadcnVerticalLayoutTester, useTouched };
1241
1398
  //# sourceMappingURL=index.js.map