@dragonmastery/zinia-forms-core 0.5.9 → 0.5.11

package/dist/index.js

@@ -309,6 +309,7 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
             const metadataProps = createMetadataProps(fieldMeta);
             return TextareaField({ ...metadataProps, ...props, name: typedPath }, context || { attrs: {} });
           };
+          textareaFieldComponent.inheritAttrs = false;
           fields[typedPath] = textareaFieldComponent;
           components[componentName] = textareaFieldComponent;
           return;
@@ -318,6 +319,7 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
             const metadataProps = createMetadataProps(fieldMeta);
             return PasswordField({ ...metadataProps, ...props, name: typedPath }, context || { attrs: {} });
           };
+          passwordFieldComponent.inheritAttrs = false;
           fields[typedPath] = passwordFieldComponent;
           components[componentName] = passwordFieldComponent;
           return;
@@ -327,6 +329,7 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
             const metadataProps = createMetadataProps(fieldMeta);
             return EmailField({ ...metadataProps, ...props, name: typedPath }, context || { attrs: {} });
           };
+          emailFieldComponent.inheritAttrs = false;
           fields[typedPath] = emailFieldComponent;
           components[componentName] = emailFieldComponent;
           return;
@@ -336,6 +339,7 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
             const metadataProps = createMetadataProps(fieldMeta);
             return TelField({ ...metadataProps, ...props, name: typedPath }, context || { attrs: {} });
           };
+          telFieldComponent.inheritAttrs = false;
           fields[typedPath] = telFieldComponent;
           components[componentName] = telFieldComponent;
           return;
@@ -345,6 +349,7 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
             const metadataProps = createMetadataProps(fieldMeta);
             return NumberField({ ...metadataProps, ...props, name: typedPath }, context || { attrs: {} });
           };
+          numberInputFieldComponent.inheritAttrs = false;
           fields[typedPath] = numberInputFieldComponent;
           components[componentName] = numberInputFieldComponent;
           return;
@@ -354,6 +359,7 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
             const metadataProps = createMetadataProps(fieldMeta);
             return CheckboxField({ ...metadataProps, ...props, name: typedPath }, context || { attrs: {} });
           };
+          checkboxFieldComponent.inheritAttrs = false;
           fields[typedPath] = checkboxFieldComponent;
           components[componentName] = checkboxFieldComponent;
           return;
@@ -363,12 +369,14 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
             const metadataProps = createMetadataProps(fieldMeta);
             return RadioField({ ...metadataProps, ...props, name: typedPath }, context || { attrs: {} });
           };
+          radioFieldComponent.inheritAttrs = false;
           fields[typedPath] = radioFieldComponent;
           components[componentName] = radioFieldComponent;
           return;
         // Skip the type-based switch below
         case "select":
           const selectFieldComponent = typedSelectFieldFactory(typedPath);
+          selectFieldComponent.inheritAttrs = false;
           fields[typedPath] = selectFieldComponent;
           components[componentName] = selectFieldComponent;
           typedSelectFields[typedPath] = selectFieldComponent;
@@ -376,6 +384,7 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
         // Skip the type-based switch below
         case "combobox":
           const comboboxFieldComponent = typedComboboxFieldFactory(typedPath);
+          comboboxFieldComponent.inheritAttrs = false;
           fields[typedPath] = comboboxFieldComponent;
           components[componentName] = comboboxFieldComponent;
           return;
@@ -385,6 +394,7 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
             const metadataProps = createMetadataProps(fieldMeta);
             return TextField({ ...metadataProps, ...props, name: typedPath }, context || { attrs: {} });
           };
+          textFieldComponent.inheritAttrs = false;
           fields[typedPath] = textFieldComponent;
           components[componentName] = textFieldComponent;
           return;
@@ -394,6 +404,7 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
             const metadataProps = createMetadataProps(fieldMeta);
             return CurrencyField({ ...metadataProps, ...props, name: typedPath }, context || { attrs: {} });
           };
+          currencyFieldComponent.inheritAttrs = false;
           fields[typedPath] = currencyFieldComponent;
           components[componentName] = currencyFieldComponent;
           return;
@@ -403,6 +414,7 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
             const metadataProps = createMetadataProps(fieldMeta);
             return DateField({ ...metadataProps, ...props, name: typedPath }, context || { attrs: {} });
           };
+          dateFieldComponent.inheritAttrs = false;
           fields[typedPath] = dateFieldComponent;
           components[componentName] = dateFieldComponent;
           return;
@@ -418,6 +430,7 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
       case "enum":
         if (fieldMeta.options && fieldMeta.options.length > 0) {
           const fieldComponent = typedSelectFieldFactory(typedPath);
+          fieldComponent.inheritAttrs = false;
           fields[typedPath] = fieldComponent;
           components[componentName] = fieldComponent;
           typedSelectFields[typedPath] = fieldComponent;
@@ -428,6 +441,7 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
           const metadataProps = createMetadataProps(fieldMeta);
           return TextField({ ...metadataProps, ...props, name: typedPath }, context || { attrs: {} });
         };
+        stringFieldComponent.inheritAttrs = false;
         fields[typedPath] = stringFieldComponent;
         components[componentName] = stringFieldComponent;
         break;
@@ -436,6 +450,7 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
           const metadataProps = createMetadataProps(fieldMeta);
           return NumberField({ ...metadataProps, ...props, name: typedPath }, context || { attrs: {} });
         };
+        numberFieldComponent.inheritAttrs = false;
         fields[typedPath] = numberFieldComponent;
         components[componentName] = numberFieldComponent;
         break;
@@ -444,6 +459,7 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
           const metadataProps = createMetadataProps(fieldMeta);
           return CheckboxField({ ...metadataProps, ...props, name: typedPath }, context || { attrs: {} });
         };
+        booleanFieldComponent.inheritAttrs = false;
         fields[typedPath] = booleanFieldComponent;
         components[componentName] = booleanFieldComponent;
         break;
@@ -457,6 +473,7 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
           const metadataProps = createMetadataProps(fieldMeta);
           return DateField({ ...metadataProps, ...props, name: typedPath }, context || { attrs: {} });
         };
+        dateFieldComponent.inheritAttrs = false;
         fields[typedPath] = dateFieldComponent;
         components[componentName] = dateFieldComponent;
         break;
@@ -509,6 +526,7 @@ var COMBOBOX_FIELD_PROP_NAMES = [
   "disabled",
   "readonly",
   "class",
+  "classStrategy",
   "label",
   "hideLabel",
   "description",
@@ -532,6 +550,7 @@ var SELECT_FIELD_PROP_NAMES = [
   "disabled",
   "readonly",
   "class",
+  "classStrategy",
   "label",
   "hideLabel",
   "description",
@@ -3215,13 +3234,17 @@ function createDaisyUIArrayField() {
                     }
                   )
                 ] }),
-                isItemCollapsed && /* @__PURE__ */ jsxs("div", { class: "px-1 sm:px-4 pb-2 sm:pb-3 border-t border-base-200/50", children: [
+                isItemCollapsed && /* @__PURE__ */ jsx("div", { class: "px-1 sm:px-4 pb-2 sm:pb-3 border-t border-base-200/50", children: slots.itemPreview ? slots.itemPreview({
+                  item,
+                  index,
+                  fields: generateFieldsProxy(index)
+                }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                   showItemNumber && /* @__PURE__ */ jsxs("div", { class: "text-xs text-base-content/60 font-medium mb-1", children: [
                     "#",
                     index + 1
                   ] }),
                   getItemPreview(item, index) && /* @__PURE__ */ jsx("div", { class: "font-semibold text-sm sm:text-base break-words leading-tight", children: getItemPreview(item, index) })
-                ] }),
+                ] }) }),
                 props.allowReordering && /* @__PURE__ */ jsxs("div", { class: "flex items-center justify-end gap-1 sm:gap-2 p-1 sm:p-3 sm:px-4 border-t border-base-200/50", children: [
                   /* @__PURE__ */ jsx(
                     "button",
@@ -3474,6 +3497,7 @@ function createDaisyUICheckboxField() {
       return null;
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
+    const { class: _attrsClass, ...restAttrs } = attrs ?? {};
     const inputProps = {
       type: "checkbox",
       checked: Boolean(formState.getValue(props.name)),
@@ -3488,19 +3512,20 @@ function createDaisyUICheckboxField() {
         formState.validateField(props.name);
       },
       name: props.name,
-      ...attrs
+      ...restAttrs
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
     const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
-    const inputClass = [
+    const consumerClass = [props.class, attrs.class].flat().filter(Boolean).join(" ");
+    const inputClass = props.classStrategy === "replace" ? consumerClass : [
       "checkbox",
       props.size ? `checkbox-${props.size}` : "",
       props.variant ? `checkbox-${props.variant}` : "",
       isTouched2 && !hasErrors ? "checkbox-success" : "",
       isTouched2 && hasErrors ? "checkbox-error" : "",
-      props.class
-    ].filter(Boolean).join(" ");
+      consumerClass
+    ].flat().filter(Boolean).join(" ");
     const isDisabled = props.disabled || isBeingPopulated;
     const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("div", { class: "form-control", children: [
@@ -3515,11 +3540,13 @@ function createDaisyUICheckboxField() {
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-sm text-error mt-1", children: formState.getError(props.name) })
     ] });
   };
+  DaisyUICheckboxField.inheritAttrs = false;
   DaisyUICheckboxField.props = [
     "name",
     "disabled",
     "readonly",
     "class",
+    "classStrategy",
     "label",
     "hideLabel",
     "description",
@@ -3671,16 +3698,18 @@ function createDaisyUIComboboxField() {
       }
       return false;
     });
-    const inputClass = [
+    const htmlAttrs = filterComponentPropsFromAttrs(propsDefinition, attrs);
+    const { class: _attrsClass, ...restHtmlAttrs } = htmlAttrs ?? {};
+    const consumerClass = [props.class, attrs.class].flat().filter(Boolean).join(" ");
+    const inputClass = props.classStrategy === "replace" ? consumerClass : [
       "input",
       "pr-10",
       props.size ? `input-${props.size}` : "",
       props.variant ? `input-${props.variant}` : "",
       isTouched2 && !hasErrors ? "input-success" : "",
       isTouched2 && hasErrors ? "input-error" : "",
-      props.class
-    ].filter(Boolean).join(" ");
-    const htmlAttrs = filterComponentPropsFromAttrs(propsDefinition, attrs);
+      consumerClass
+    ].flat().filter(Boolean).join(" ");
     const inputProps = {
       type: "text",
       value: displayText.value,
@@ -3918,7 +3947,7 @@ function createDaisyUIComboboxField() {
         }
       },
       name: props.name,
-      ...htmlAttrs
+      ...restHtmlAttrs
     };
     return /* @__PURE__ */ jsxs("label", { ref: comboboxRoot, class: "floating-label", children: [
       !props.hideLabel && /* @__PURE__ */ jsxs("span", { children: [
@@ -4060,6 +4089,7 @@ function createDaisyUIComboboxField() {
       ] })
     ] });
   };
+  DaisyUIComboboxField.inheritAttrs = false;
   DaisyUIComboboxField.props = propsDefinition;
   return DaisyUIComboboxField;
 }
@@ -4071,6 +4101,7 @@ function createDaisyUICurrencyField() {
       return null;
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
+    const { class: _attrsClass, ...restAttrs } = attrs ?? {};
     const inputProps = {
       type: "number",
       value: formState.getValue(props.name),
@@ -4089,19 +4120,20 @@ function createDaisyUICurrencyField() {
         formState.validateField(props.name);
       },
       name: props.name,
-      ...attrs
+      ...restAttrs
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
     const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
-    const inputClass = [
+    const consumerClass = [props.class, attrs.class].flat().filter(Boolean).join(" ");
+    const inputClass = props.classStrategy === "replace" ? consumerClass : [
       "input",
       props.size ? `input-${props.size}` : "",
       props.variant ? `input-${props.variant}` : "",
       isTouched2 && !hasErrors ? "input-success" : "",
       isTouched2 && hasErrors ? "input-error" : "",
-      props.class
-    ].filter(Boolean).join(" ");
+      consumerClass
+    ].flat().filter(Boolean).join(" ");
     const isDisabled = props.disabled || isBeingPopulated;
     const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
@@ -4127,6 +4159,7 @@ function createDaisyUICurrencyField() {
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
+  DaisyUICurrencyField.inheritAttrs = false;
   DaisyUICurrencyField.props = [
     "name",
     "placeholder",
@@ -4136,6 +4169,7 @@ function createDaisyUICurrencyField() {
     "disabled",
     "readonly",
     "class",
+    "classStrategy",
     "legend",
     "description",
     "required",
@@ -4171,6 +4205,7 @@ function createDaisyUIDateField() {
       return null;
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
+    const { class: _attrsClass, ...restAttrs } = attrs ?? {};
     const inputProps = {
       type: "date",
       value: formatDateValue(formState.getValue(props.name)),
@@ -4188,19 +4223,20 @@ function createDaisyUIDateField() {
         formState.validateField(props.name);
       },
       name: props.name,
-      ...attrs
+      ...restAttrs
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
     const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
-    const inputClass = [
+    const consumerClass = [props.class, attrs.class].flat().filter(Boolean).join(" ");
+    const inputClass = props.classStrategy === "replace" ? consumerClass : [
       "input",
       props.size ? `input-${props.size}` : "",
       props.variant ? `input-${props.variant}` : "",
       isTouched2 && !hasErrors ? "input-success" : "",
       isTouched2 && hasErrors ? "input-error" : "",
-      props.class
-    ].filter(Boolean).join(" ");
+      consumerClass
+    ].flat().filter(Boolean).join(" ");
     const isDisabled = props.disabled || isBeingPopulated;
     const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
@@ -4225,6 +4261,7 @@ function createDaisyUIDateField() {
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
+  DaisyUIDateField.inheritAttrs = false;
   DaisyUIDateField.props = [
     "name",
     "formatter",
@@ -4232,6 +4269,7 @@ function createDaisyUIDateField() {
     "disabled",
     "readonly",
     "class",
+    "classStrategy",
     "label",
     "hideLabel",
     "description",
@@ -4270,6 +4308,7 @@ function createDaisyUIDateTimeLocalField() {
       return null;
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
+    const { class: _attrsClass, ...restAttrs } = attrs ?? {};
     const inputProps = {
       type: "datetime-local",
       value: formatDateTimeValue(formState.getValue(props.name)),
@@ -4286,19 +4325,20 @@ function createDaisyUIDateTimeLocalField() {
       max: props.max,
       step: props.step,
       name: props.name,
-      ...attrs
+      ...restAttrs
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
     const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
-    const inputClass = [
+    const consumerClass = [props.class, attrs.class].flat().filter(Boolean).join(" ");
+    const inputClass = props.classStrategy === "replace" ? consumerClass : [
       "input",
       props.size ? `input-${props.size}` : "",
       props.variant ? `input-${props.variant}` : "",
       isTouched2 && !hasErrors ? "input-success" : "",
       isTouched2 && hasErrors ? "input-error" : "",
-      props.class
-    ].filter(Boolean).join(" ");
+      consumerClass
+    ].flat().filter(Boolean).join(" ");
     const isDisabled = props.disabled || isBeingPopulated;
     const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
@@ -4321,12 +4361,14 @@ function createDaisyUIDateTimeLocalField() {
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
+  DaisyUIDateTimeLocalField.inheritAttrs = false;
   DaisyUIDateTimeLocalField.props = [
     "name",
     "placeholder",
     "disabled",
     "readonly",
     "class",
+    "classStrategy",
     "label",
     "hideLabel",
     "description",
@@ -4347,6 +4389,7 @@ function createDaisyUIEmailField() {
       return null;
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
+    const { class: _attrsClass, ...restAttrs } = attrs ?? {};
     const inputProps = {
       type: "email",
       value: formState.getValue(props.name),
@@ -4361,19 +4404,20 @@ function createDaisyUIEmailField() {
       // Use metadata autocomplete value if available, otherwise use props.autocomplete or default
       autocomplete: fieldMetadata?.autocomplete || props.autocomplete || "email",
       name: props.name,
-      ...attrs
+      ...restAttrs
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
     const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
-    const inputClass = [
+    const consumerClass = [props.class, attrs.class].flat().filter(Boolean).join(" ");
+    const inputClass = props.classStrategy === "replace" ? consumerClass : [
       "input",
       props.size ? `input-${props.size}` : "",
       props.variant ? `input-${props.variant}` : "",
       isTouched2 && !hasErrors ? "input-success" : "",
       isTouched2 && hasErrors ? "input-error" : "",
-      props.class
-    ].filter(Boolean).join(" ");
+      consumerClass
+    ].flat().filter(Boolean).join(" ");
     const isDisabled = props.disabled || isBeingPopulated;
     const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
@@ -4396,6 +4440,7 @@ function createDaisyUIEmailField() {
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
+  DaisyUIEmailField.inheritAttrs = false;
   DaisyUIEmailField.props = [
     "name",
     "placeholder",
@@ -4403,6 +4448,7 @@ function createDaisyUIEmailField() {
     "readonly",
     "autocomplete",
     "class",
+    "classStrategy",
     "label",
     "hideLabel",
     "description",
@@ -4420,6 +4466,7 @@ function createDaisyUIFileField() {
       return null;
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
+    const { class: _attrsClass, ...restAttrs } = attrs ?? {};
     const inputProps = {
       type: "file",
       onChange: (event) => {
@@ -4433,19 +4480,20 @@ function createDaisyUIFileField() {
       accept: props.accept,
       multiple: props.multiple,
       name: props.name,
-      ...attrs
+      ...restAttrs
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
     const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
-    const inputClass = [
+    const consumerClass = [props.class, attrs.class].flat().filter(Boolean).join(" ");
+    const inputClass = props.classStrategy === "replace" ? consumerClass : [
       "file-input",
       props.size ? `file-input-${props.size}` : "",
       props.variant ? `file-input-${props.variant}` : "",
       isTouched2 && !hasErrors ? "file-input-success" : "",
       isTouched2 && hasErrors ? "file-input-error" : "",
-      props.class
-    ].filter(Boolean).join(" ");
+      consumerClass
+    ].flat().filter(Boolean).join(" ");
     const isDisabled = props.disabled || isBeingPopulated;
     const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("div", { class: "form-control", children: [
@@ -4453,16 +4501,27 @@ function createDaisyUIFileField() {
         props.label || fieldMetadata.label,
         fieldMetadata.isRequired && /* @__PURE__ */ jsx("span", { class: "text-error", children: " *" })
       ] }) }),
-      /* @__PURE__ */ jsx("input", { class: inputClass, disabled: isDisabled, readonly: props.readonly, "data-testid": `${formState.storeName}-file-field-${String(props.name)}`, ...inputProps }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          class: inputClass,
+          disabled: isDisabled,
+          readonly: props.readonly,
+          "data-testid": `${formState.storeName}-file-field-${String(props.name)}`,
+          ...inputProps
+        }
+      ),
       descriptionText && /* @__PURE__ */ jsx("p", { class: "text-sm mt-1", children: descriptionText }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-sm text-error mt-1", children: formState.getError(props.name) })
     ] });
   };
+  DaisyUIFileField.inheritAttrs = false;
   DaisyUIFileField.props = [
     "name",
     "disabled",
     "readonly",
     "class",
+    "classStrategy",
     "label",
     "hideLabel",
     "description",
@@ -4634,6 +4693,7 @@ function createDaisyUINumberField() {
       return null;
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
+    const { class: _attrsClass, ...restAttrs } = attrs ?? {};
     const inputProps = {
       type: "number",
       value: formState.getValue(props.name),
@@ -4647,19 +4707,20 @@ function createDaisyUINumberField() {
         formState.validateField(props.name);
       },
       name: props.name,
-      ...attrs
+      ...restAttrs
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
     const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
-    const inputClass = [
+    const consumerClass = [props.class, attrs.class].flat().filter(Boolean).join(" ");
+    const inputClass = props.classStrategy === "replace" ? consumerClass : [
       "input",
       props.size ? `input-${props.size}` : "",
       props.variant ? `input-${props.variant}` : "",
       isTouched2 && !hasErrors ? "input-success" : "",
       isTouched2 && hasErrors ? "input-error" : "",
-      props.class
-    ].filter(Boolean).join(" ");
+      consumerClass
+    ].flat().filter(Boolean).join(" ");
     const isDisabled = props.disabled || isBeingPopulated;
     const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
@@ -4685,6 +4746,7 @@ function createDaisyUINumberField() {
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
+  DaisyUINumberField.inheritAttrs = false;
   DaisyUINumberField.props = [
     "name",
     "placeholder",
@@ -4694,6 +4756,7 @@ function createDaisyUINumberField() {
     "disabled",
     "readonly",
     "class",
+    "classStrategy",
     "legend",
     "description",
     "required",
@@ -4710,6 +4773,7 @@ function createDaisyUIPasswordField() {
       return null;
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
+    const { class: _attrsClass, ...restAttrs } = attrs ?? {};
     const inputProps = {
       type: "password",
       value: formState.getValue(props.name),
@@ -4724,19 +4788,20 @@ function createDaisyUIPasswordField() {
       // Use metadata autocomplete value if available, otherwise use props.autocomplete or default
       autocomplete: fieldMetadata?.autocomplete || props.autocomplete || "current-password",
       name: props.name,
-      ...attrs
+      ...restAttrs
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
     const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
-    const inputClass = [
+    const consumerClass = [props.class, attrs.class].flat().filter(Boolean).join(" ");
+    const inputClass = props.classStrategy === "replace" ? consumerClass : [
       "input",
       props.size ? `input-${props.size}` : "",
       props.variant ? `input-${props.variant}` : "",
       isTouched2 && !hasErrors ? "input-success" : "",
       isTouched2 && hasErrors ? "input-error" : "",
-      props.class
-    ].filter(Boolean).join(" ");
+      consumerClass
+    ].flat().filter(Boolean).join(" ");
     const isDisabled = props.disabled || isBeingPopulated;
     const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
@@ -4759,6 +4824,7 @@ function createDaisyUIPasswordField() {
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
+  DaisyUIPasswordField.inheritAttrs = false;
   DaisyUIPasswordField.props = [
     "name",
     "placeholder",
@@ -4766,6 +4832,7 @@ function createDaisyUIPasswordField() {
     "readonly",
     "autocomplete",
     "class",
+    "classStrategy",
     "label",
     "hideLabel",
     "description",
@@ -4868,6 +4935,7 @@ function createDaisyUIRangeField() {
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
     const currentValue = formState.getValue(props.name);
+    const { class: _attrsClass, ...restAttrs } = attrs ?? {};
     const inputProps = {
       type: "range",
       value: currentValue,
@@ -4884,19 +4952,20 @@ function createDaisyUIRangeField() {
       max: props.max ?? fieldMetadata.max,
       step: props.step,
       name: props.name,
-      ...attrs
+      ...restAttrs
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
     const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
-    const inputClass = [
+    const consumerClass = [props.class, attrs.class].flat().filter(Boolean).join(" ");
+    const inputClass = props.classStrategy === "replace" ? consumerClass : [
       "range",
       props.size ? `range-${props.size}` : "",
       props.variant ? `range-${props.variant}` : "",
       isTouched2 && !hasErrors ? "range-success" : "",
       isTouched2 && hasErrors ? "range-error" : "",
-      props.class
-    ].filter(Boolean).join(" ");
+      consumerClass
+    ].flat().filter(Boolean).join(" ");
     const isDisabled = props.disabled || isBeingPopulated;
     const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("div", { class: "form-control", children: [
@@ -4912,11 +4981,13 @@ function createDaisyUIRangeField() {
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-sm text-error mt-1", children: formState.getError(props.name) })
     ] });
   };
+  DaisyUIRangeField.inheritAttrs = false;
   DaisyUIRangeField.props = [
     "name",
     "disabled",
     "readonly",
     "class",
+    "classStrategy",
     "label",
     "hideLabel",
     "description",
@@ -4968,6 +5039,7 @@ function createDaisyUISearchField() {
       return null;
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
+    const { class: _attrsClass, ...restAttrs } = attrs ?? {};
     const inputProps = {
       type: "search",
       value: formState.getValue(props.name),
@@ -4981,19 +5053,20 @@ function createDaisyUISearchField() {
       },
       autocomplete: props.autocomplete,
       name: props.name,
-      ...attrs
+      ...restAttrs
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
     const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
-    const inputClass = [
+    const consumerClass = [props.class, attrs.class].flat().filter(Boolean).join(" ");
+    const inputClass = props.classStrategy === "replace" ? consumerClass : [
       "input",
       props.size ? `input-${props.size}` : "",
       props.variant ? `input-${props.variant}` : "",
       isTouched2 && !hasErrors ? "input-success" : "",
       isTouched2 && hasErrors ? "input-error" : "",
-      props.class
-    ].filter(Boolean).join(" ");
+      consumerClass
+    ].flat().filter(Boolean).join(" ");
     const isDisabled = props.disabled || isBeingPopulated;
     const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
@@ -5016,6 +5089,7 @@ function createDaisyUISearchField() {
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
+  DaisyUISearchField.inheritAttrs = false;
   DaisyUISearchField.props = [
     "name",
     "placeholder",
@@ -5023,6 +5097,7 @@ function createDaisyUISearchField() {
     "readonly",
     "autocomplete",
     "class",
+    "classStrategy",
     "label",
     "hideLabel",
     "description",
@@ -5122,6 +5197,7 @@ function createDaisyUISelectField() {
       return props.placeholder;
     });
     const htmlAttrs = filterComponentPropsFromAttrs(propsDefinition, attrs);
+    const { class: _attrsClass, ...restHtmlAttrs } = htmlAttrs ?? {};
     const selectProps = {
       value: formState.getValue(props.name),
       onChange: (event) => {
@@ -5137,18 +5213,19 @@ function createDaisyUISelectField() {
         formState.validateField(props.name);
       },
       name: props.name,
-      ...htmlAttrs
+      ...restHtmlAttrs
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
-    const selectClass = [
+    const consumerClass = [props.class, attrs.class].flat().filter(Boolean).join(" ");
+    const selectClass = props.classStrategy === "replace" ? consumerClass : [
       "select",
       props.size ? `select-${props.size}` : "",
       props.variant ? `select-${props.variant}` : "",
       isTouched2 && !hasErrors ? "select-success" : "",
       isTouched2 && hasErrors ? "select-error" : "",
-      props.class
-    ].filter(Boolean).join(" ");
+      consumerClass
+    ].flat().filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
       !props.hideLabel && /* @__PURE__ */ jsxs("span", { children: [
         props.label || fieldMetadata.label,
@@ -5171,6 +5248,7 @@ function createDaisyUISelectField() {
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
+  DaisyUISelectField.inheritAttrs = false;
   DaisyUISelectField.props = propsDefinition;
   return DaisyUISelectField;
 }
@@ -5241,6 +5319,7 @@ function createDaisyUITelField() {
       return null;
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
+    const { class: _attrsClass, ...restAttrs } = attrs ?? {};
     const inputProps = {
       type: "tel",
       value: formState.getValue(props.name),
@@ -5256,19 +5335,20 @@ function createDaisyUITelField() {
       pattern: props.pattern || fieldMetadata.pattern?.toString().slice(1, -1),
       // Convert RegExp to string pattern
       name: props.name,
-      ...attrs
+      ...restAttrs
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
     const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
-    const inputClass = [
+    const consumerClass = [props.class, attrs.class].flat().filter(Boolean).join(" ");
+    const inputClass = props.classStrategy === "replace" ? consumerClass : [
       "input",
       props.size ? `input-${props.size}` : "",
       props.variant ? `input-${props.variant}` : "",
       isTouched2 && !hasErrors ? "input-success" : "",
       isTouched2 && hasErrors ? "input-error" : "",
-      props.class
-    ].filter(Boolean).join(" ");
+      consumerClass
+    ].flat().filter(Boolean).join(" ");
     const isDisabled = props.disabled || isBeingPopulated;
     const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
@@ -5291,6 +5371,7 @@ function createDaisyUITelField() {
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
+  DaisyUITelField.inheritAttrs = false;
   DaisyUITelField.props = [
     "name",
     "placeholder",
@@ -5298,6 +5379,7 @@ function createDaisyUITelField() {
     "readonly",
     "autocomplete",
     "class",
+    "classStrategy",
     "label",
     "hideLabel",
     "description",
@@ -5349,6 +5431,7 @@ function createDaisyUITextareaField() {
         });
       }
     };
+    const { class: _attrsClass, ...restAttrs } = attrs ?? {};
     const textareaProps = {
       value: formState.getValue(props.name),
       onInput: async (event) => {
@@ -5363,19 +5446,20 @@ function createDaisyUITextareaField() {
         formState.validateField(props.name);
       },
       name: props.name,
-      ...attrs
+      ...restAttrs
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
     const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
-    const textareaClass = [
+    const consumerClass = [props.class, attrs.class].flat().filter(Boolean).join(" ");
+    const textareaClass = props.classStrategy === "replace" ? consumerClass : [
       "textarea",
       props.size ? `textarea-${props.size}` : "",
       props.variant ? `textarea-${props.variant}` : "",
       isTouched2 && !hasErrors ? "textarea-success" : "",
       isTouched2 && hasErrors ? "textarea-error" : "",
-      props.class
-    ].filter(Boolean).join(" ");
+      consumerClass
+    ].flat().filter(Boolean).join(" ");
     const isDisabled = props.disabled || isBeingPopulated;
     const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
@@ -5400,12 +5484,14 @@ function createDaisyUITextareaField() {
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
+  DaisyUITextareaField.inheritAttrs = false;
   DaisyUITextareaField.props = [
     "name",
     "placeholder",
     "disabled",
     "readonly",
     "class",
+    "classStrategy",
     "label",
     "hideLabel",
     "description",
@@ -5426,6 +5512,7 @@ function createDaisyUITextField() {
       return null;
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
+    const { class: _attrsClass, ...restAttrs } = attrs ?? {};
     const inputProps = {
       type: "text",
       value: formState.getValue(props.name),
@@ -5440,19 +5527,20 @@ function createDaisyUITextField() {
       // Use metadata autocomplete value if available, otherwise use props.autocomplete
       autocomplete: fieldMetadata?.autocomplete || props.autocomplete,
       name: props.name,
-      ...attrs
+      ...restAttrs
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
     const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
-    const inputClass = [
+    const consumerClass = [props.class, attrs.class].flat().filter(Boolean).join(" ");
+    const inputClass = props.classStrategy === "replace" ? consumerClass : [
       "input",
       props.size ? `input-${props.size}` : "",
       props.variant ? `input-${props.variant}` : "",
       isTouched2 && !hasErrors ? "input-success" : "",
       isTouched2 && hasErrors ? "input-error" : "",
-      props.class
-    ].filter(Boolean).join(" ");
+      consumerClass
+    ].flat().filter(Boolean).join(" ");
     const isDisabled = props.disabled || isBeingPopulated;
     const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
@@ -5475,6 +5563,7 @@ function createDaisyUITextField() {
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
+  DaisyUITextField.inheritAttrs = false;
   DaisyUITextField.props = [
     "name",
     "placeholder",
@@ -5482,6 +5571,7 @@ function createDaisyUITextField() {
     "readonly",
     "autocomplete",
     "class",
+    "classStrategy",
     "label",
     "hideLabel",
     "description",
@@ -5499,6 +5589,7 @@ function createDaisyUITimeField() {
       return null;
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
+    const { class: _attrsClass, ...restAttrs } = attrs ?? {};
     const inputProps = {
       type: "time",
       value: formatTimeValue(formState.getValue(props.name)),
@@ -5514,19 +5605,20 @@ function createDaisyUITimeField() {
       max: props.max,
       step: props.step,
       name: props.name,
-      ...attrs
+      ...restAttrs
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
     const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
-    const inputClass = [
+    const consumerClass = [props.class, attrs.class].flat().filter(Boolean).join(" ");
+    const inputClass = props.classStrategy === "replace" ? consumerClass : [
       "input",
       props.size ? `input-${props.size}` : "",
       props.variant ? `input-${props.variant}` : "",
       isTouched2 && !hasErrors ? "input-success" : "",
       isTouched2 && hasErrors ? "input-error" : "",
-      props.class
-    ].filter(Boolean).join(" ");
+      consumerClass
+    ].flat().filter(Boolean).join(" ");
     const isDisabled = props.disabled || isBeingPopulated;
     const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
@@ -5549,12 +5641,14 @@ function createDaisyUITimeField() {
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
+  DaisyUITimeField.inheritAttrs = false;
   DaisyUITimeField.props = [
     "name",
     "placeholder",
     "disabled",
     "readonly",
     "class",
+    "classStrategy",
     "label",
     "hideLabel",
     "description",
@@ -6062,6 +6156,7 @@ function createDaisyUIUrlField() {
       return null;
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
+    const { class: _attrsClass, ...restAttrs } = attrs ?? {};
     const inputProps = {
       type: "url",
       value: formState.getValue(props.name),
@@ -6077,19 +6172,20 @@ function createDaisyUIUrlField() {
       pattern: props.pattern || fieldMetadata.pattern?.toString().slice(1, -1),
       // Convert RegExp to string pattern
       name: props.name,
-      ...attrs
+      ...restAttrs
     };
     const hasErrors = formState.hasError(props.name);
     const isTouched2 = formState.isTouched(props.name);
     const isBeingPopulated = formState.state?.populatingFields?.[props.name] || false;
-    const inputClass = [
+    const consumerClass = [props.class, attrs.class].flat().filter(Boolean).join(" ");
+    const inputClass = props.classStrategy === "replace" ? consumerClass : [
       "input",
       props.size ? `input-${props.size}` : "",
       props.variant ? `input-${props.variant}` : "",
       isTouched2 && !hasErrors ? "input-success" : "",
       isTouched2 && hasErrors ? "input-error" : "",
-      props.class
-    ].filter(Boolean).join(" ");
+      consumerClass
+    ].flat().filter(Boolean).join(" ");
     const isDisabled = props.disabled || isBeingPopulated;
     const descriptionText = isBeingPopulated ? "Loading..." : props.description;
     return /* @__PURE__ */ jsxs("label", { class: "floating-label", children: [
@@ -6112,6 +6208,7 @@ function createDaisyUIUrlField() {
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) })
     ] });
   };
+  DaisyUIUrlField.inheritAttrs = false;
   DaisyUIUrlField.props = [
     "name",
     "placeholder",
@@ -6119,6 +6216,7 @@ function createDaisyUIUrlField() {
     "readonly",
     "autocomplete",
     "class",
+    "classStrategy",
     "label",
     "hideLabel",
     "description",