react-smart-fields 2.1.0 → 2.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 (3) hide show
  1. package/dist/index.cjs +66 -65
  2. package/dist/index.js +66 -65
  3. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -113,82 +113,82 @@ var buildInitialValues = (fields, defaultValues, controlledValues) => {
113
113
  };
114
114
  var baseTheme = {
115
115
  default: {
116
- wrapper: "w-full max-w-2xl mx-auto p-6 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm dark:shadow-2xl",
117
- title: "text-2xl font-semibold tracking-tight text-gray-900 dark:text-gray-100",
118
- description: "text-sm text-gray-500 dark:text-gray-400",
119
- fieldsContainer: "space-y-3",
120
- field: "w-full",
121
- label: "flex text-sm font-medium text-gray-800 dark:text-gray-200 mb-1.5",
122
- help: "text-xs text-gray-500 dark:text-gray-400",
123
- control: "w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition-colors",
124
- textarea: "w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition-colors min-h-24",
125
- select: "w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition-colors",
126
- option: "text-gray-800 dark:text-gray-200",
127
- checkbox: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none",
128
- radio: "h-4 w-4 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none",
129
- error: "text-sm font-medium text-red-500 dark:text-red-400"
116
+ wrapper: "w-full max-w-2xl mx-auto p-6 bg-white dark:bg-zinc-950 rounded-lg border border-zinc-200 dark:border-zinc-800 shadow-sm",
117
+ title: "text-2xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-50",
118
+ description: "text-sm text-zinc-500 dark:text-zinc-400",
119
+ fieldsContainer: "space-y-4",
120
+ field: "w-full space-y-2",
121
+ label: "text-sm font-medium leading-none text-zinc-950 dark:text-zinc-50",
122
+ help: "text-[0.8rem] text-zinc-500 dark:text-zinc-400",
123
+ control: "w-full rounded-md border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-white dark:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
124
+ textarea: "w-full rounded-md border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-white dark:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 transition-colors min-h-[80px] resize-none",
125
+ select: "w-full rounded-md border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 text-zinc-950 dark:text-zinc-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-white dark:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
126
+ option: "text-zinc-950 dark:text-zinc-50 bg-white dark:bg-zinc-950",
127
+ checkbox: "h-4 w-4 shrink-0 rounded-sm border border-zinc-900 dark:border-zinc-50 bg-white dark:bg-zinc-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-white dark:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
128
+ radio: "h-4 w-4 shrink-0 rounded-full border border-zinc-900 dark:border-zinc-50 bg-white dark:bg-zinc-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-white dark:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
129
+ error: "text-[0.8rem] font-medium text-red-500 dark:text-red-400"
130
130
  },
131
131
  minimal: {
132
132
  wrapper: "w-full max-w-2xl mx-auto",
133
- title: "text-xl font-semibold text-gray-900 dark:text-gray-100",
134
- description: "text-sm text-gray-500 dark:text-gray-400",
135
- fieldsContainer: "space-y-3",
136
- field: "w-full",
137
- label: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
138
- help: "text-xs text-gray-500 dark:text-gray-400",
139
- control: "w-full rounded-md border border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
140
- textarea: "w-full rounded-md border border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-24",
141
- select: "w-full rounded-md border border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
142
- option: "text-gray-900 dark:text-gray-100",
143
- checkbox: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600 bg-transparent focus:outline-none",
144
- radio: "h-4 w-4 rounded-full border border-gray-300 dark:border-gray-600 bg-transparent focus:outline-none",
145
- error: "text-sm text-red-500"
133
+ title: "text-xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-50",
134
+ description: "text-sm text-zinc-500 dark:text-zinc-400",
135
+ fieldsContainer: "space-y-4",
136
+ field: "w-full space-y-2",
137
+ label: "text-sm font-medium leading-none text-zinc-950 dark:text-zinc-50",
138
+ help: "text-[0.8rem] text-zinc-500 dark:text-zinc-400",
139
+ control: "w-full rounded-md border border-zinc-200 dark:border-zinc-800 bg-transparent text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
140
+ textarea: "w-full rounded-md border border-zinc-200 dark:border-zinc-800 bg-transparent text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-colors min-h-[80px] resize-none",
141
+ select: "w-full rounded-md border border-zinc-200 dark:border-zinc-800 bg-transparent text-zinc-950 dark:text-zinc-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
142
+ option: "text-zinc-950 dark:text-zinc-50",
143
+ checkbox: "h-4 w-4 shrink-0 rounded-sm border border-zinc-200 dark:border-zinc-800 bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
144
+ radio: "h-4 w-4 shrink-0 rounded-full border border-zinc-200 dark:border-zinc-800 bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
145
+ error: "text-[0.8rem] font-medium text-red-500 dark:text-red-400"
146
146
  },
147
147
  filled: {
148
- wrapper: "w-full max-w-2xl mx-auto p-6 bg-gray-50 dark:bg-gray-900/50 text-gray-800 dark:text-gray-200 rounded-xl border border-gray-100 dark:border-gray-800",
149
- title: "text-2xl font-semibold text-gray-900 dark:text-gray-100",
150
- description: "text-sm text-gray-500 dark:text-gray-400",
151
- fieldsContainer: "space-y-3",
152
- field: "w-full",
153
- label: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
154
- help: "text-xs text-gray-500 dark:text-gray-400",
155
- control: "w-full rounded-lg border border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
156
- textarea: "w-full rounded-lg border border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-24",
157
- select: "w-full rounded-lg border border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
158
- option: "text-gray-900 dark:text-gray-100",
159
- checkbox: "h-4 w-4 rounded border border-transparent bg-white dark:bg-gray-800 focus:outline-none",
160
- radio: "h-4 w-4 rounded-full border border-transparent bg-white dark:bg-gray-800 focus:outline-none",
161
- error: "text-sm text-red-500"
148
+ wrapper: "w-full max-w-2xl mx-auto p-6 bg-zinc-50 dark:bg-zinc-900 rounded-lg border border-zinc-100 dark:border-zinc-800",
149
+ title: "text-2xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-50",
150
+ description: "text-sm text-zinc-500 dark:text-zinc-400",
151
+ fieldsContainer: "space-y-4",
152
+ field: "w-full space-y-2",
153
+ label: "text-sm font-medium leading-none text-zinc-950 dark:text-zinc-50",
154
+ help: "text-[0.8rem] text-zinc-500 dark:text-zinc-400",
155
+ control: "w-full rounded-md border border-zinc-100 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-800 text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-zinc-50 dark:ring-offset-zinc-900 disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
156
+ textarea: "w-full rounded-md border border-zinc-100 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-800 text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-zinc-50 dark:ring-offset-zinc-900 disabled:cursor-not-allowed disabled:opacity-50 transition-colors min-h-[80px] resize-none",
157
+ select: "w-full rounded-md border border-zinc-100 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-800 text-zinc-950 dark:text-zinc-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-zinc-50 dark:ring-offset-zinc-900 disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
158
+ option: "text-zinc-950 dark:text-zinc-50 bg-white dark:bg-zinc-900",
159
+ checkbox: "h-4 w-4 shrink-0 rounded-sm border border-zinc-200 dark:border-zinc-700 bg-zinc-100 dark:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-zinc-50 dark:ring-offset-zinc-900 disabled:cursor-not-allowed disabled:opacity-50",
160
+ radio: "h-4 w-4 shrink-0 rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-100 dark:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-zinc-50 dark:ring-offset-zinc-900 disabled:cursor-not-allowed disabled:opacity-50",
161
+ error: "text-[0.8rem] font-medium text-red-500 dark:text-red-400"
162
162
  },
163
163
  underline: {
164
- wrapper: "w-full max-w-2xl mx-auto p-4",
165
- title: "text-xl font-semibold text-gray-900 dark:text-gray-100",
166
- description: "text-sm text-gray-500 dark:text-gray-400",
164
+ wrapper: "w-full max-w-2xl mx-auto py-4",
165
+ title: "text-xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-50",
166
+ description: "text-sm text-zinc-500 dark:text-zinc-400",
167
167
  fieldsContainer: "space-y-4",
168
- field: "w-full",
169
- label: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
170
- help: "text-xs text-gray-500 dark:text-gray-400",
171
- control: "w-full border-0 border-b border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 rounded-none focus:outline-none focus:ring-0 focus:border-blue-500",
172
- textarea: "w-full border-0 border-b border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 rounded-none focus:outline-none focus:ring-0 focus:border-blue-500 min-h-24",
173
- select: "w-full border-0 border-b border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 rounded-none focus:outline-none focus:ring-0 focus:border-blue-500",
174
- option: "text-gray-900 dark:text-gray-100",
175
- checkbox: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600",
176
- radio: "h-4 w-4 rounded-full border border-gray-300 dark:border-gray-600",
177
- error: "text-sm text-red-500"
168
+ field: "w-full space-y-2",
169
+ label: "text-sm font-medium leading-none text-zinc-950 dark:text-zinc-50",
170
+ help: "text-[0.8rem] text-zinc-500 dark:text-zinc-400",
171
+ control: "w-full border-0 border-b border-zinc-200 dark:border-zinc-700 bg-transparent text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 rounded-none focus-visible:outline-none focus-visible:ring-0 focus-visible:border-zinc-950 dark:focus-visible:border-zinc-300 disabled:cursor-not-allowed disabled:opacity-50 transition-colors px-0",
172
+ textarea: "w-full border-0 border-b border-zinc-200 dark:border-zinc-700 bg-transparent text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 rounded-none focus-visible:outline-none focus-visible:ring-0 focus-visible:border-zinc-950 dark:focus-visible:border-zinc-300 disabled:cursor-not-allowed disabled:opacity-50 transition-colors px-0 min-h-[80px] resize-none",
173
+ select: "w-full border-0 border-b border-zinc-200 dark:border-zinc-700 bg-transparent text-zinc-950 dark:text-zinc-50 focus-visible:outline-none focus-visible:ring-0 focus-visible:border-zinc-950 dark:focus-visible:border-zinc-300 disabled:cursor-not-allowed disabled:opacity-50 transition-colors rounded-none px-0",
174
+ option: "text-zinc-950 dark:text-zinc-50",
175
+ checkbox: "h-4 w-4 shrink-0 rounded-sm border border-zinc-200 dark:border-zinc-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
176
+ radio: "h-4 w-4 shrink-0 rounded-full border border-zinc-200 dark:border-zinc-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
177
+ error: "text-[0.8rem] font-medium text-red-500 dark:text-red-400"
178
178
  }
179
179
  };
180
180
  var sizeMap = {
181
181
  sm: {
182
182
  control: "px-3 py-1.5 text-xs",
183
183
  label: "text-xs",
184
- help: "text-[11px]",
184
+ help: "text-[0.7rem]",
185
185
  error: "text-xs"
186
186
  },
187
187
  md: {
188
- control: "px-3.5 py-2 text-sm",
188
+ control: "px-3 py-2 text-sm",
189
189
  label: "text-sm",
190
- help: "text-xs",
191
- error: "text-sm"
190
+ help: "text-[0.8rem]",
191
+ error: "text-[0.8rem]"
192
192
  },
193
193
  lg: {
194
194
  control: "px-4 py-2.5 text-base",
@@ -417,7 +417,7 @@ var DynamicFields = ({
417
417
  error: cn(defaultUi.error, sizeClasses.error, errorClassName, field?.errorClassName, ui?.error, field?.ui?.error)
418
418
  });
419
419
  const buildStateClassName = (field, hasError, disabled, readOnly) => cn(
420
- hasError && stateClassNames?.invalid,
420
+ hasError && (stateClassNames?.invalid ?? "border-red-500 dark:border-red-500 focus-visible:ring-red-500 dark:focus-visible:ring-red-500"),
421
421
  disabled && stateClassNames?.disabled,
422
422
  readOnly && stateClassNames?.readonly,
423
423
  dirtyMap[field.name] && stateClassNames?.dirty,
@@ -434,7 +434,8 @@ var DynamicFields = ({
434
434
  };
435
435
  const renderDefaultControl = (context) => {
436
436
  const { field, value: value2, options, isLoadingOptions, classes, handleChange, handleBlur, disabled, readOnly, error } = context;
437
- const controlStateClass = buildStateClassName(field, Boolean(error), disabled, readOnly);
437
+ const showsError = Boolean(error) && shouldShowError(field.name);
438
+ const controlStateClass = buildStateClassName(field, showsError, disabled, readOnly);
438
439
  if (field.type === "textarea") {
439
440
  return /* @__PURE__ */ import_react.default.createElement(
440
441
  "textarea",
@@ -482,7 +483,7 @@ var DynamicFields = ({
482
483
  {
483
484
  key: `${field.name}-${String(option.value)}`,
484
485
  htmlFor: `${field.name}-${String(option.value)}`,
485
- className: "flex items-center gap-2 cursor-pointer"
486
+ className: "flex items-center gap-2 cursor-pointer select-none"
486
487
  },
487
488
  /* @__PURE__ */ import_react.default.createElement(
488
489
  "input",
@@ -499,7 +500,7 @@ var DynamicFields = ({
499
500
  className: cn(classes.radio, controlStateClass)
500
501
  }
501
502
  ),
502
- /* @__PURE__ */ import_react.default.createElement("span", { className: "text-sm text-gray-800 dark:text-gray-200" }, option.label)
503
+ /* @__PURE__ */ import_react.default.createElement("span", { className: "text-sm font-medium leading-none text-zinc-950 dark:text-zinc-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, option.label)
503
504
  )));
504
505
  }
505
506
  if (field.type === "checkbox") {
@@ -541,7 +542,7 @@ var DynamicFields = ({
541
542
  }
542
543
  );
543
544
  };
544
- return /* @__PURE__ */ import_react.default.createElement("div", { className: resolveUi().wrapper }, title && /* @__PURE__ */ import_react.default.createElement("div", { className: "mb-4" }, /* @__PURE__ */ import_react.default.createElement("h2", { className: resolveUi().title }, title), description && /* @__PURE__ */ import_react.default.createElement("p", { className: resolveUi().description }, description)), /* @__PURE__ */ import_react.default.createElement("div", { className: resolveUi().fieldsContainer }, visibleFields.map((field) => {
545
+ return /* @__PURE__ */ import_react.default.createElement("div", { className: resolveUi().wrapper }, title && /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col space-y-1.5 pb-6 mb-6 border-b border-zinc-200 dark:border-zinc-800" }, /* @__PURE__ */ import_react.default.createElement("h2", { className: resolveUi().title }, title), description && /* @__PURE__ */ import_react.default.createElement("p", { className: resolveUi().description }, description)), /* @__PURE__ */ import_react.default.createElement("div", { className: resolveUi().fieldsContainer }, visibleFields.map((field) => {
545
546
  const classes = resolveUi(field);
546
547
  const storedValue = getIn(values, field.name);
547
548
  const renderedValue = field.transformIn ? field.transformIn(storedValue, values) : storedValue;
@@ -569,7 +570,7 @@ var DynamicFields = ({
569
570
  handleBlur: () => handleFieldBlur(field)
570
571
  };
571
572
  const requiredMark = field.required || field.requiredWhen?.(values);
572
- const labelNode = field.type === "checkbox" ? null : renderLabel ? renderLabel(context) : field.label ? /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: field.name, className: classes.label }, field.label, requiredMark && /* @__PURE__ */ import_react.default.createElement("span", { className: "text-red-500 dark:text-red-400 ml-1" }, "*")) : null;
573
+ const labelNode = field.type === "checkbox" ? null : renderLabel ? renderLabel(context) : field.label ? /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: field.name, className: classes.label }, field.label, requiredMark && /* @__PURE__ */ import_react.default.createElement("span", { className: "text-red-500 ml-1" }, "*")) : null;
573
574
  const helpNode = renderDescription ? renderDescription(context) : field.description ? /* @__PURE__ */ import_react.default.createElement("p", { className: classes.help }, field.description) : null;
574
575
  const errorNode = canShowError ? renderError ? renderError(context) : /* @__PURE__ */ import_react.default.createElement("p", { className: classes.error, role: "alert" }, error) : null;
575
576
  const controlNode = field.renderControl?.(context) ?? renderControl?.(context) ?? renderDefaultControl(context);
@@ -583,7 +584,7 @@ var DynamicFields = ({
583
584
  }));
584
585
  }
585
586
  if (field.type === "checkbox") {
586
- return /* @__PURE__ */ import_react.default.createElement("div", { key: field.name, className: classes.field }, /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: field.name, className: "inline-flex items-start gap-2 cursor-pointer" }, controlNode, /* @__PURE__ */ import_react.default.createElement("span", { className: "text-sm text-gray-800 dark:text-gray-200" }, field.label, requiredMark && /* @__PURE__ */ import_react.default.createElement("span", { className: "text-red-500 dark:text-red-400 ml-1" }, "*"))), helpNode, errorNode);
587
+ return /* @__PURE__ */ import_react.default.createElement("div", { key: field.name, className: classes.field }, /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: field.name, className: "inline-flex items-start gap-2 cursor-pointer select-none" }, controlNode, /* @__PURE__ */ import_react.default.createElement("span", { className: "text-sm font-medium leading-none text-zinc-950 dark:text-zinc-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, field.label, requiredMark && /* @__PURE__ */ import_react.default.createElement("span", { className: "text-red-500 ml-1" }, "*"))), helpNode, errorNode);
587
588
  }
588
589
  return /* @__PURE__ */ import_react.default.createElement("div", { key: field.name, className: classes.field }, labelNode, helpNode, controlNode, errorNode);
589
590
  })));
package/dist/index.js CHANGED
@@ -77,82 +77,82 @@ var buildInitialValues = (fields, defaultValues, controlledValues) => {
77
77
  };
78
78
  var baseTheme = {
79
79
  default: {
80
- wrapper: "w-full max-w-2xl mx-auto p-6 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm dark:shadow-2xl",
81
- title: "text-2xl font-semibold tracking-tight text-gray-900 dark:text-gray-100",
82
- description: "text-sm text-gray-500 dark:text-gray-400",
83
- fieldsContainer: "space-y-3",
84
- field: "w-full",
85
- label: "flex text-sm font-medium text-gray-800 dark:text-gray-200 mb-1.5",
86
- help: "text-xs text-gray-500 dark:text-gray-400",
87
- control: "w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition-colors",
88
- textarea: "w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition-colors min-h-24",
89
- select: "w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition-colors",
90
- option: "text-gray-800 dark:text-gray-200",
91
- checkbox: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none",
92
- radio: "h-4 w-4 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none",
93
- error: "text-sm font-medium text-red-500 dark:text-red-400"
80
+ wrapper: "w-full max-w-2xl mx-auto p-6 bg-white dark:bg-zinc-950 rounded-lg border border-zinc-200 dark:border-zinc-800 shadow-sm",
81
+ title: "text-2xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-50",
82
+ description: "text-sm text-zinc-500 dark:text-zinc-400",
83
+ fieldsContainer: "space-y-4",
84
+ field: "w-full space-y-2",
85
+ label: "text-sm font-medium leading-none text-zinc-950 dark:text-zinc-50",
86
+ help: "text-[0.8rem] text-zinc-500 dark:text-zinc-400",
87
+ control: "w-full rounded-md border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-white dark:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
88
+ textarea: "w-full rounded-md border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-white dark:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 transition-colors min-h-[80px] resize-none",
89
+ select: "w-full rounded-md border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 text-zinc-950 dark:text-zinc-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-white dark:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
90
+ option: "text-zinc-950 dark:text-zinc-50 bg-white dark:bg-zinc-950",
91
+ checkbox: "h-4 w-4 shrink-0 rounded-sm border border-zinc-900 dark:border-zinc-50 bg-white dark:bg-zinc-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-white dark:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
92
+ radio: "h-4 w-4 shrink-0 rounded-full border border-zinc-900 dark:border-zinc-50 bg-white dark:bg-zinc-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-white dark:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
93
+ error: "text-[0.8rem] font-medium text-red-500 dark:text-red-400"
94
94
  },
95
95
  minimal: {
96
96
  wrapper: "w-full max-w-2xl mx-auto",
97
- title: "text-xl font-semibold text-gray-900 dark:text-gray-100",
98
- description: "text-sm text-gray-500 dark:text-gray-400",
99
- fieldsContainer: "space-y-3",
100
- field: "w-full",
101
- label: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
102
- help: "text-xs text-gray-500 dark:text-gray-400",
103
- control: "w-full rounded-md border border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
104
- textarea: "w-full rounded-md border border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-24",
105
- select: "w-full rounded-md border border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
106
- option: "text-gray-900 dark:text-gray-100",
107
- checkbox: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600 bg-transparent focus:outline-none",
108
- radio: "h-4 w-4 rounded-full border border-gray-300 dark:border-gray-600 bg-transparent focus:outline-none",
109
- error: "text-sm text-red-500"
97
+ title: "text-xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-50",
98
+ description: "text-sm text-zinc-500 dark:text-zinc-400",
99
+ fieldsContainer: "space-y-4",
100
+ field: "w-full space-y-2",
101
+ label: "text-sm font-medium leading-none text-zinc-950 dark:text-zinc-50",
102
+ help: "text-[0.8rem] text-zinc-500 dark:text-zinc-400",
103
+ control: "w-full rounded-md border border-zinc-200 dark:border-zinc-800 bg-transparent text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
104
+ textarea: "w-full rounded-md border border-zinc-200 dark:border-zinc-800 bg-transparent text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-colors min-h-[80px] resize-none",
105
+ select: "w-full rounded-md border border-zinc-200 dark:border-zinc-800 bg-transparent text-zinc-950 dark:text-zinc-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
106
+ option: "text-zinc-950 dark:text-zinc-50",
107
+ checkbox: "h-4 w-4 shrink-0 rounded-sm border border-zinc-200 dark:border-zinc-800 bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
108
+ radio: "h-4 w-4 shrink-0 rounded-full border border-zinc-200 dark:border-zinc-800 bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
109
+ error: "text-[0.8rem] font-medium text-red-500 dark:text-red-400"
110
110
  },
111
111
  filled: {
112
- wrapper: "w-full max-w-2xl mx-auto p-6 bg-gray-50 dark:bg-gray-900/50 text-gray-800 dark:text-gray-200 rounded-xl border border-gray-100 dark:border-gray-800",
113
- title: "text-2xl font-semibold text-gray-900 dark:text-gray-100",
114
- description: "text-sm text-gray-500 dark:text-gray-400",
115
- fieldsContainer: "space-y-3",
116
- field: "w-full",
117
- label: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
118
- help: "text-xs text-gray-500 dark:text-gray-400",
119
- control: "w-full rounded-lg border border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
120
- textarea: "w-full rounded-lg border border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-24",
121
- select: "w-full rounded-lg border border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
122
- option: "text-gray-900 dark:text-gray-100",
123
- checkbox: "h-4 w-4 rounded border border-transparent bg-white dark:bg-gray-800 focus:outline-none",
124
- radio: "h-4 w-4 rounded-full border border-transparent bg-white dark:bg-gray-800 focus:outline-none",
125
- error: "text-sm text-red-500"
112
+ wrapper: "w-full max-w-2xl mx-auto p-6 bg-zinc-50 dark:bg-zinc-900 rounded-lg border border-zinc-100 dark:border-zinc-800",
113
+ title: "text-2xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-50",
114
+ description: "text-sm text-zinc-500 dark:text-zinc-400",
115
+ fieldsContainer: "space-y-4",
116
+ field: "w-full space-y-2",
117
+ label: "text-sm font-medium leading-none text-zinc-950 dark:text-zinc-50",
118
+ help: "text-[0.8rem] text-zinc-500 dark:text-zinc-400",
119
+ control: "w-full rounded-md border border-zinc-100 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-800 text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-zinc-50 dark:ring-offset-zinc-900 disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
120
+ textarea: "w-full rounded-md border border-zinc-100 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-800 text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-zinc-50 dark:ring-offset-zinc-900 disabled:cursor-not-allowed disabled:opacity-50 transition-colors min-h-[80px] resize-none",
121
+ select: "w-full rounded-md border border-zinc-100 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-800 text-zinc-950 dark:text-zinc-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-zinc-50 dark:ring-offset-zinc-900 disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
122
+ option: "text-zinc-950 dark:text-zinc-50 bg-white dark:bg-zinc-900",
123
+ checkbox: "h-4 w-4 shrink-0 rounded-sm border border-zinc-200 dark:border-zinc-700 bg-zinc-100 dark:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-zinc-50 dark:ring-offset-zinc-900 disabled:cursor-not-allowed disabled:opacity-50",
124
+ radio: "h-4 w-4 shrink-0 rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-100 dark:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-zinc-50 dark:ring-offset-zinc-900 disabled:cursor-not-allowed disabled:opacity-50",
125
+ error: "text-[0.8rem] font-medium text-red-500 dark:text-red-400"
126
126
  },
127
127
  underline: {
128
- wrapper: "w-full max-w-2xl mx-auto p-4",
129
- title: "text-xl font-semibold text-gray-900 dark:text-gray-100",
130
- description: "text-sm text-gray-500 dark:text-gray-400",
128
+ wrapper: "w-full max-w-2xl mx-auto py-4",
129
+ title: "text-xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-50",
130
+ description: "text-sm text-zinc-500 dark:text-zinc-400",
131
131
  fieldsContainer: "space-y-4",
132
- field: "w-full",
133
- label: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
134
- help: "text-xs text-gray-500 dark:text-gray-400",
135
- control: "w-full border-0 border-b border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 rounded-none focus:outline-none focus:ring-0 focus:border-blue-500",
136
- textarea: "w-full border-0 border-b border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 rounded-none focus:outline-none focus:ring-0 focus:border-blue-500 min-h-24",
137
- select: "w-full border-0 border-b border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 rounded-none focus:outline-none focus:ring-0 focus:border-blue-500",
138
- option: "text-gray-900 dark:text-gray-100",
139
- checkbox: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600",
140
- radio: "h-4 w-4 rounded-full border border-gray-300 dark:border-gray-600",
141
- error: "text-sm text-red-500"
132
+ field: "w-full space-y-2",
133
+ label: "text-sm font-medium leading-none text-zinc-950 dark:text-zinc-50",
134
+ help: "text-[0.8rem] text-zinc-500 dark:text-zinc-400",
135
+ control: "w-full border-0 border-b border-zinc-200 dark:border-zinc-700 bg-transparent text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 rounded-none focus-visible:outline-none focus-visible:ring-0 focus-visible:border-zinc-950 dark:focus-visible:border-zinc-300 disabled:cursor-not-allowed disabled:opacity-50 transition-colors px-0",
136
+ textarea: "w-full border-0 border-b border-zinc-200 dark:border-zinc-700 bg-transparent text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 rounded-none focus-visible:outline-none focus-visible:ring-0 focus-visible:border-zinc-950 dark:focus-visible:border-zinc-300 disabled:cursor-not-allowed disabled:opacity-50 transition-colors px-0 min-h-[80px] resize-none",
137
+ select: "w-full border-0 border-b border-zinc-200 dark:border-zinc-700 bg-transparent text-zinc-950 dark:text-zinc-50 focus-visible:outline-none focus-visible:ring-0 focus-visible:border-zinc-950 dark:focus-visible:border-zinc-300 disabled:cursor-not-allowed disabled:opacity-50 transition-colors rounded-none px-0",
138
+ option: "text-zinc-950 dark:text-zinc-50",
139
+ checkbox: "h-4 w-4 shrink-0 rounded-sm border border-zinc-200 dark:border-zinc-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
140
+ radio: "h-4 w-4 shrink-0 rounded-full border border-zinc-200 dark:border-zinc-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
141
+ error: "text-[0.8rem] font-medium text-red-500 dark:text-red-400"
142
142
  }
143
143
  };
144
144
  var sizeMap = {
145
145
  sm: {
146
146
  control: "px-3 py-1.5 text-xs",
147
147
  label: "text-xs",
148
- help: "text-[11px]",
148
+ help: "text-[0.7rem]",
149
149
  error: "text-xs"
150
150
  },
151
151
  md: {
152
- control: "px-3.5 py-2 text-sm",
152
+ control: "px-3 py-2 text-sm",
153
153
  label: "text-sm",
154
- help: "text-xs",
155
- error: "text-sm"
154
+ help: "text-[0.8rem]",
155
+ error: "text-[0.8rem]"
156
156
  },
157
157
  lg: {
158
158
  control: "px-4 py-2.5 text-base",
@@ -381,7 +381,7 @@ var DynamicFields = ({
381
381
  error: cn(defaultUi.error, sizeClasses.error, errorClassName, field?.errorClassName, ui?.error, field?.ui?.error)
382
382
  });
383
383
  const buildStateClassName = (field, hasError, disabled, readOnly) => cn(
384
- hasError && stateClassNames?.invalid,
384
+ hasError && (stateClassNames?.invalid ?? "border-red-500 dark:border-red-500 focus-visible:ring-red-500 dark:focus-visible:ring-red-500"),
385
385
  disabled && stateClassNames?.disabled,
386
386
  readOnly && stateClassNames?.readonly,
387
387
  dirtyMap[field.name] && stateClassNames?.dirty,
@@ -398,7 +398,8 @@ var DynamicFields = ({
398
398
  };
399
399
  const renderDefaultControl = (context) => {
400
400
  const { field, value: value2, options, isLoadingOptions, classes, handleChange, handleBlur, disabled, readOnly, error } = context;
401
- const controlStateClass = buildStateClassName(field, Boolean(error), disabled, readOnly);
401
+ const showsError = Boolean(error) && shouldShowError(field.name);
402
+ const controlStateClass = buildStateClassName(field, showsError, disabled, readOnly);
402
403
  if (field.type === "textarea") {
403
404
  return /* @__PURE__ */ React.createElement(
404
405
  "textarea",
@@ -446,7 +447,7 @@ var DynamicFields = ({
446
447
  {
447
448
  key: `${field.name}-${String(option.value)}`,
448
449
  htmlFor: `${field.name}-${String(option.value)}`,
449
- className: "flex items-center gap-2 cursor-pointer"
450
+ className: "flex items-center gap-2 cursor-pointer select-none"
450
451
  },
451
452
  /* @__PURE__ */ React.createElement(
452
453
  "input",
@@ -463,7 +464,7 @@ var DynamicFields = ({
463
464
  className: cn(classes.radio, controlStateClass)
464
465
  }
465
466
  ),
466
- /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-800 dark:text-gray-200" }, option.label)
467
+ /* @__PURE__ */ React.createElement("span", { className: "text-sm font-medium leading-none text-zinc-950 dark:text-zinc-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, option.label)
467
468
  )));
468
469
  }
469
470
  if (field.type === "checkbox") {
@@ -505,7 +506,7 @@ var DynamicFields = ({
505
506
  }
506
507
  );
507
508
  };
508
- return /* @__PURE__ */ React.createElement("div", { className: resolveUi().wrapper }, title && /* @__PURE__ */ React.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React.createElement("h2", { className: resolveUi().title }, title), description && /* @__PURE__ */ React.createElement("p", { className: resolveUi().description }, description)), /* @__PURE__ */ React.createElement("div", { className: resolveUi().fieldsContainer }, visibleFields.map((field) => {
509
+ return /* @__PURE__ */ React.createElement("div", { className: resolveUi().wrapper }, title && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col space-y-1.5 pb-6 mb-6 border-b border-zinc-200 dark:border-zinc-800" }, /* @__PURE__ */ React.createElement("h2", { className: resolveUi().title }, title), description && /* @__PURE__ */ React.createElement("p", { className: resolveUi().description }, description)), /* @__PURE__ */ React.createElement("div", { className: resolveUi().fieldsContainer }, visibleFields.map((field) => {
509
510
  const classes = resolveUi(field);
510
511
  const storedValue = getIn(values, field.name);
511
512
  const renderedValue = field.transformIn ? field.transformIn(storedValue, values) : storedValue;
@@ -533,7 +534,7 @@ var DynamicFields = ({
533
534
  handleBlur: () => handleFieldBlur(field)
534
535
  };
535
536
  const requiredMark = field.required || field.requiredWhen?.(values);
536
- const labelNode = field.type === "checkbox" ? null : renderLabel ? renderLabel(context) : field.label ? /* @__PURE__ */ React.createElement("label", { htmlFor: field.name, className: classes.label }, field.label, requiredMark && /* @__PURE__ */ React.createElement("span", { className: "text-red-500 dark:text-red-400 ml-1" }, "*")) : null;
537
+ const labelNode = field.type === "checkbox" ? null : renderLabel ? renderLabel(context) : field.label ? /* @__PURE__ */ React.createElement("label", { htmlFor: field.name, className: classes.label }, field.label, requiredMark && /* @__PURE__ */ React.createElement("span", { className: "text-red-500 ml-1" }, "*")) : null;
537
538
  const helpNode = renderDescription ? renderDescription(context) : field.description ? /* @__PURE__ */ React.createElement("p", { className: classes.help }, field.description) : null;
538
539
  const errorNode = canShowError ? renderError ? renderError(context) : /* @__PURE__ */ React.createElement("p", { className: classes.error, role: "alert" }, error) : null;
539
540
  const controlNode = field.renderControl?.(context) ?? renderControl?.(context) ?? renderDefaultControl(context);
@@ -547,7 +548,7 @@ var DynamicFields = ({
547
548
  }));
548
549
  }
549
550
  if (field.type === "checkbox") {
550
- return /* @__PURE__ */ React.createElement("div", { key: field.name, className: classes.field }, /* @__PURE__ */ React.createElement("label", { htmlFor: field.name, className: "inline-flex items-start gap-2 cursor-pointer" }, controlNode, /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-800 dark:text-gray-200" }, field.label, requiredMark && /* @__PURE__ */ React.createElement("span", { className: "text-red-500 dark:text-red-400 ml-1" }, "*"))), helpNode, errorNode);
551
+ return /* @__PURE__ */ React.createElement("div", { key: field.name, className: classes.field }, /* @__PURE__ */ React.createElement("label", { htmlFor: field.name, className: "inline-flex items-start gap-2 cursor-pointer select-none" }, controlNode, /* @__PURE__ */ React.createElement("span", { className: "text-sm font-medium leading-none text-zinc-950 dark:text-zinc-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, field.label, requiredMark && /* @__PURE__ */ React.createElement("span", { className: "text-red-500 ml-1" }, "*"))), helpNode, errorNode);
551
552
  }
552
553
  return /* @__PURE__ */ React.createElement("div", { key: field.name, className: classes.field }, labelNode, helpNode, controlNode, errorNode);
553
554
  })));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-smart-fields",
3
- "version": "2.1.0",
3
+ "version": "2.2.0",
4
4
  "description": "A flexible and highly customizable dynamic form builder for React with validation, conditional fields, theming, and headless rendering.",
5
5
  "license": "MIT",
6
6
  "author": "Pratik Panchal",