@dragonmastery/zinia-forms-core 0.3.1 → 0.3.2

package/dist/index.d.ts

@@ -139,6 +139,87 @@ interface CheckboxFieldProps<FormType> {
     variant?: string;
 }
 
+/**
+ * Option item for combobox fields - can be a string or label/value object
+ */
+type ComboboxOption = string | {
+    label: string;
+    value: string;
+};
+/**
+ * Props for the ComboboxField component
+ */
+interface ComboboxFieldProps<FormType, P extends Path<FormType> = Path<FormType>> {
+    /**
+     * Field name (path in the form state)
+     * Accepts both static paths and dynamic paths for use in array fields
+     */
+    name: FlexiblePath<FormType>;
+    /**
+     * Field label
+     */
+    label?: string;
+    /**
+     * Whether to hide the label
+     */
+    hideLabel?: boolean;
+    /**
+     * Field description
+     */
+    description?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Whether the field is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the field is readonly
+     */
+    readonly?: boolean;
+    /**
+     * CSS classes to apply to the field
+     */
+    class?: string | string[];
+    /**
+     * Field size
+     */
+    size?: string;
+    /**
+     * Field variant
+     */
+    variant?: string;
+    /**
+     * Combobox options (array of strings or label/value objects)
+     * If not provided, will use options from schema metadata
+     *
+     * For async loading, use form-level dataLoaders and pass options via extraData:
+     * ```ts
+     * useForm(schema, {
+     *   dataLoaders: { products: loadProducts },
+     * });
+     * // Then: :options="form.extraData.products || []"
+     * ```
+     */
+    options?: ComboboxOption[];
+    /**
+     * Whether to allow creating new values that don't exist in the options
+     * Default: true
+     */
+    allowCreate?: boolean;
+    /**
+     * Custom filter function for options
+     * Default: filters by case-insensitive substring match
+     */
+    filterFn?: (query: string, option: ComboboxOption) => boolean;
+}
+
 interface CurrencyFieldProps<FormType> {
     name: FlexiblePath<FormType>;
     label?: string;
@@ -811,7 +892,7 @@ interface FieldMetadata {
     /** The data type of the field */
     type: 'string' | 'number' | 'boolean' | 'array' | 'object' | 'enum' | 'date' | 'union';
     /** The input type for rendering the field */
-    inputType?: 'text' | 'email' | 'url' | 'tel' | 'number' | 'select' | 'checkbox' | 'radio' | 'textarea' | 'password' | 'array' | 'currency' | 'date' | 'time' | 'datetime-local' | 'file' | 'range' | 'search';
+    inputType?: 'text' | 'email' | 'url' | 'tel' | 'number' | 'select' | 'checkbox' | 'radio' | 'textarea' | 'password' | 'array' | 'currency' | 'date' | 'time' | 'datetime-local' | 'file' | 'range' | 'search' | 'combobox';
     /** The display label for the field */
     label?: string;
     /** Placeholder text for the field */
@@ -870,7 +951,7 @@ interface FieldMetadata {
  */
 interface SchemaFieldMetadata {
     /** The input type for rendering the field */
-    inputType?: 'text' | 'email' | 'tel' | 'number' | 'select' | 'checkbox' | 'radio' | 'textarea' | 'password' | 'currency' | 'date' | 'time' | 'datetime-local';
+    inputType?: 'text' | 'email' | 'tel' | 'number' | 'select' | 'checkbox' | 'radio' | 'textarea' | 'password' | 'currency' | 'date' | 'time' | 'datetime-local' | 'combobox';
     /** Placeholder text for the field */
     placeholder?: string;
     /** The display label for the field */
@@ -928,6 +1009,7 @@ interface StyleCreators {
     createSearchField: <FormType>() => FunctionalComponent<SearchFieldProps<FormType>, {}, any, {}>;
     createTimeField: <FormType>() => FunctionalComponent<TimeFieldProps<FormType>, {}, any, {}>;
     createDateTimeLocalField: <FormType>() => FunctionalComponent<DateTimeLocalFieldProps<FormType>, {}, any, {}>;
+    createComboboxField: <FormType>() => FunctionalComponent<ComboboxFieldProps<FormType>, {}, any, {}>;
     createArrayField: <FormType, ItemType = any>() => FunctionalComponent<ArrayFieldProps<FormType, ItemType>, {}, {
         itemRenderer: (props: {
             item: ItemType;
@@ -1107,6 +1189,12 @@ declare function useForm<T extends z.ZodObject<any>, CalcType = (values: z.infer
         resetField: (path: string) => void;
         hasError: (path: string) => boolean;
         getError: (path: string) => string;
+        setFocus: (path: string, value: boolean) => void;
+        isFocused: (path: string) => boolean;
+        setDisplayText: (path: string, text: string) => void;
+        getDisplayText: (path: string) => string;
+        setSelectedIndex: (path: string, index: number) => void;
+        getSelectedIndex: (path: string) => number;
     };
     ZiniaForm: vue.FunctionalComponent<FormProps<z.TypeOf<T>>, {}, any, {}>;
     ZiniaSubmitButton: vue.FunctionalComponent<SubmitButtonProps<z.TypeOf<T>>, {}, any, {}>;

package/dist/index.js

@@ -151,6 +151,7 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
   const SearchField = styleCreators.createSearchField();
   const TimeField = styleCreators.createTimeField();
   const DateTimeLocalField = styleCreators.createDateTimeLocalField();
+  const ComboboxField = styleCreators.createComboboxField();
   const ArrayField = styleCreators.createArrayField();
   const TransferListField = styleCreators.createTransferListField();
   const ToppingsField = styleCreators.createToppingsField();
@@ -241,6 +242,15 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
           typedSelectFields[typedPath] = selectFieldComponent;
           return;
         // Skip the type-based switch below
+        case "combobox":
+          const comboboxFieldComponent = (props, context) => {
+            const metadataProps = createMetadataProps(fieldMeta);
+            return ComboboxField({ ...metadataProps, ...props, name: typedPath }, context || { attrs: {} });
+          };
+          fields[typedPath] = comboboxFieldComponent;
+          components[componentName] = comboboxFieldComponent;
+          return;
+        // Skip the type-based switch below
         case "text":
           const textFieldComponent = (props, context) => {
             const metadataProps = createMetadataProps(fieldMeta);
@@ -665,6 +675,36 @@ function hasFieldError(formState, path) {
 function getFieldError(formState, path) {
   return formState.errors[path] || "";
 }
+function setFieldFocus(formState, path, value) {
+  if (value) {
+    formState.focused[path] = true;
+  } else {
+    delete formState.focused[path];
+  }
+}
+function isFieldFocused(formState, path) {
+  return !!formState.focused[path];
+}
+function setFieldDisplayText(formState, path, text) {
+  if (text) {
+    formState.displayText[path] = text;
+  } else {
+    delete formState.displayText[path];
+  }
+}
+function getFieldDisplayText(formState, path) {
+  return formState.displayText[path] || "";
+}
+function setFieldSelectedIndex(formState, path, index) {
+  if (index >= 0) {
+    formState.selectedIndex[path] = index;
+  } else {
+    delete formState.selectedIndex[path];
+  }
+}
+function getFieldSelectedIndex(formState, path) {
+  return formState.selectedIndex[path] ?? -1;
+}
 
 // src/registry/metadataRegistry.ts
 var globalRegistry = {};
@@ -1335,6 +1375,9 @@ function useFormState(initialData, options) {
     touched: {},
     dirty: {},
     errors: {},
+    focused: {},
+    displayText: {},
+    selectedIndex: {},
     // Form status
     isSubmitting: false,
     hasAttemptedSubmit: false,
@@ -1405,6 +1448,9 @@ function useFormState(initialData, options) {
     state.touched = {};
     state.dirty = {};
     state.errors = {};
+    state.focused = {};
+    state.displayText = {};
+    state.selectedIndex = {};
   }
   function setSubmitting(value) {
     state.isSubmitting = value;
@@ -1797,7 +1843,13 @@ function useForm(schema, options) {
     isDirtyField: (path) => isDirtyField(formState.state, path),
     resetField: (path) => resetField(formState.state, initialFormData, path, schema, schemaCache),
     hasError: (path) => hasFieldError(formState.state, path),
-    getError: (path) => getFieldError(formState.state, path)
+    getError: (path) => getFieldError(formState.state, path),
+    setFocus: (path, value) => setFieldFocus(formState.state, path, value),
+    isFocused: (path) => isFieldFocused(formState.state, path),
+    setDisplayText: (path, text) => setFieldDisplayText(formState.state, path, text),
+    getDisplayText: (path) => getFieldDisplayText(formState.state, path),
+    setSelectedIndex: (path, index) => setFieldSelectedIndex(formState.state, path, index),
+    getSelectedIndex: (path) => getFieldSelectedIndex(formState.state, path)
   };
   if (options.autoProvide !== false) {
     provide(ZINIA_FORM_SCHEMA_KEY, schema);
@@ -3818,6 +3870,397 @@ function createDaisyUICheckboxField() {
   ];
   return DaisyUICheckboxField;
 }
+
+// src/fields/types/ComboboxFieldProps.ts
+var COMBOBOX_FIELD_PROP_NAMES = [
+  "name",
+  "options",
+  "placeholder",
+  "disabled",
+  "readonly",
+  "class",
+  "label",
+  "hideLabel",
+  "description",
+  "required",
+  "size",
+  "variant",
+  "allowCreate",
+  "filterFn"
+];
+
+// src/utils/propNormalization.ts
+function camelToKebab(str) {
+  return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+}
+function getPropVariants(propsDefinition) {
+  const variants = /* @__PURE__ */ new Set();
+  if (Array.isArray(propsDefinition)) {
+    propsDefinition.forEach((propName) => {
+      variants.add(propName);
+      variants.add(camelToKebab(propName));
+    });
+  } else {
+    Object.keys(propsDefinition).forEach((propName) => {
+      variants.add(propName);
+      variants.add(camelToKebab(propName));
+    });
+  }
+  return variants;
+}
+function filterComponentPropsFromAttrs(propsDefinition, attrs) {
+  const propVariants = getPropVariants(propsDefinition);
+  const filtered = {};
+  for (const key in attrs) {
+    if (!propVariants.has(key)) {
+      filtered[key] = attrs[key];
+    }
+  }
+  return filtered;
+}
+function normalizePropsFromAttrs(props, propsDefinition, attrs) {
+  const propVariants = getPropVariants(propsDefinition);
+  const normalized = { ...props };
+  for (const key in attrs) {
+    if (propVariants.has(key)) {
+      const camelCaseKey = Array.isArray(propsDefinition) ? propsDefinition.find((p) => camelToKebab(p) === key) || key.replace(/-([a-z])/g, (_, c) => c.toUpperCase()) : Object.keys(propsDefinition).find((p) => camelToKebab(p) === key) || key.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+      if (!(camelCaseKey in normalized) || normalized[camelCaseKey] === void 0) {
+        normalized[camelCaseKey] = attrs[key];
+      }
+    }
+  }
+  return normalized;
+}
+function createDaisyUIComboboxField() {
+  const propsDefinition = [...COMBOBOX_FIELD_PROP_NAMES];
+  const DaisyUIComboboxField = (props, { attrs }) => {
+    const formState = inject(ZINIA_FORM_KEY);
+    if (!formState) {
+      console.error("ComboboxField: formState is required but was not injected");
+      return null;
+    }
+    const fieldMetadata = formState.fieldsMetadata[props.name] || {};
+    const normalizedProps = normalizePropsFromAttrs(props, propsDefinition, attrs);
+    const normalizeOption = (option) => {
+      if (typeof option === "string") {
+        return { label: option, value: option };
+      }
+      return option;
+    };
+    const getOptions = computed(() => {
+      if (normalizedProps.options) {
+        return normalizedProps.options.map(normalizeOption);
+      }
+      const schemaOptions = fieldMetadata?.options || [];
+      return schemaOptions.map((opt) => ({
+        label: opt.label || String(opt.value),
+        value: String(opt.value)
+      }));
+    });
+    const filteredOptions = computed(() => {
+      const query = String(displayText.value || "").toLowerCase();
+      if (!query) {
+        return getOptions.value;
+      }
+      const filterFn = normalizedProps.filterFn || ((q, opt) => {
+        const normalized = normalizeOption(opt);
+        return normalized.label.toLowerCase().includes(q.toLowerCase()) || normalized.value.toLowerCase().includes(q.toLowerCase());
+      });
+      return getOptions.value.filter((opt) => {
+        const originalOpt = opt.label === opt.value ? opt.label : opt;
+        return filterFn(query, originalOpt);
+      });
+    });
+    const isNewValue = computed(() => {
+      if (!normalizedProps.allowCreate) return false;
+      const currentText = String(displayText.value || "").trim().toLowerCase();
+      if (!currentText) return false;
+      return !getOptions.value.some(
+        (opt) => opt.value.toLowerCase() === currentText || opt.label.toLowerCase() === currentText
+      );
+    });
+    const hasErrors = formState.hasError(props.name);
+    const isTouched2 = formState.isTouched(props.name);
+    const comboboxRoot = ref(null);
+    const inputElement = ref(null);
+    const selectedIndex = computed({
+      get: () => formState.getSelectedIndex(props.name),
+      set: (value) => formState.setSelectedIndex(props.name, value)
+    });
+    const isFocused = computed(() => formState.isFocused(props.name));
+    const displayText = computed({
+      get: () => formState.getDisplayText(props.name),
+      set: (value) => formState.setDisplayText(props.name, value)
+    });
+    const currentFormValue = computed(() => formState.getValue(props.name));
+    const getLabelForValue = (value) => {
+      if (!value) return "";
+      const valueStr = String(value);
+      const option = getOptions.value.find((opt) => opt.value === valueStr);
+      return option ? option.label : valueStr;
+    };
+    const displayLabelForValue = computed(() => getLabelForValue(currentFormValue.value));
+    if (!isFocused.value && displayText.value !== displayLabelForValue.value) {
+      displayText.value = displayLabelForValue.value;
+    }
+    const showDropdown = computed(() => {
+      if (!isFocused.value) return false;
+      if (getOptions.value.length > 0) return true;
+      if (normalizedProps.allowCreate) {
+        return String(formState.getValue(props.name) || "").trim().length > 0;
+      }
+      return false;
+    });
+    const inputClass = [
+      "input",
+      "w-full",
+      "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);
+    const inputProps = {
+      type: "text",
+      value: displayText.value,
+      onInput: (event) => {
+        const target = event.target;
+        const inputValue = target.value;
+        displayText.value = inputValue;
+        formState.setSelectedIndex(props.name, -1);
+        if (!isFocused.value) {
+          formState.setFocus(props.name, true);
+        }
+        formState.setValue(props.name, inputValue);
+      },
+      onBlur: (event) => {
+        const relatedTarget = event.relatedTarget;
+        if (comboboxRoot.value?.contains(relatedTarget)) {
+          return;
+        }
+        const displayValue = String(displayText.value || "").trim();
+        const matchingOption = getOptions.value.find(
+          (opt) => opt.label.toLowerCase() === displayValue.toLowerCase() || opt.value.toLowerCase() === displayValue.toLowerCase()
+        );
+        if (matchingOption) {
+          formState.setValue(props.name, matchingOption.value);
+          displayText.value = matchingOption.label;
+        } else if (normalizedProps.allowCreate && displayValue) {
+          formState.setValue(props.name, displayValue);
+          displayText.value = displayValue;
+        } else if (!displayValue) {
+          formState.setValue(props.name, "");
+          displayText.value = "";
+        } else {
+          formState.setValue(props.name, displayValue);
+        }
+        formState.touchField(props.name);
+        formState.validateField(props.name);
+        formState.setFocus(props.name, false);
+      },
+      onFocus: () => {
+        formState.setFocus(props.name, true);
+        const labelForValue = displayLabelForValue.value;
+        if (labelForValue && displayText.value !== labelForValue) {
+          displayText.value = labelForValue;
+        }
+      },
+      onKeydown: (event) => {
+        const { key } = event;
+        switch (key) {
+          case "ArrowDown":
+            event.preventDefault();
+            event.stopPropagation();
+            formState.setFocus(props.name, true);
+            const totalOptions = filteredOptions.value.length + (isNewValue.value ? 1 : 0);
+            if (totalOptions > 0) {
+              const currentIndex = selectedIndex.value;
+              const newIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % totalOptions;
+              selectedIndex.value = newIndex;
+              nextTick(() => {
+                const selectedElement = comboboxRoot.value?.querySelector(
+                  newIndex === filteredOptions.value.length ? "#option-new" : `#option-${newIndex}`
+                );
+                if (selectedElement) {
+                  selectedElement.scrollIntoView({ block: "nearest", behavior: "smooth" });
+                }
+              });
+            }
+            break;
+          case "ArrowUp":
+            event.preventDefault();
+            event.stopPropagation();
+            formState.setFocus(props.name, true);
+            const totalOptionsUp = filteredOptions.value.length + (isNewValue.value ? 1 : 0);
+            if (totalOptionsUp > 0) {
+              const currentIndex = selectedIndex.value;
+              const newIndex = currentIndex < 0 ? totalOptionsUp - 1 : (currentIndex - 1 + totalOptionsUp) % totalOptionsUp;
+              selectedIndex.value = newIndex;
+              nextTick(() => {
+                const selectedElement = comboboxRoot.value?.querySelector(
+                  newIndex === filteredOptions.value.length ? "#option-new" : `#option-${newIndex}`
+                );
+                if (selectedElement) {
+                  selectedElement.scrollIntoView({ block: "nearest", behavior: "smooth" });
+                }
+              });
+            }
+            break;
+          case "Enter":
+            event.preventDefault();
+            if (selectedIndex.value >= 0 && selectedIndex.value < filteredOptions.value.length) {
+              const option = filteredOptions.value[selectedIndex.value];
+              formState.setValue(props.name, option.value);
+              displayText.value = option.label;
+              formState.touchField(props.name);
+              formState.validateField(props.name);
+              formState.setSelectedIndex(props.name, -1);
+              formState.setFocus(props.name, false);
+            } else if (selectedIndex.value === filteredOptions.value.length && isNewValue.value) {
+              const displayValue = String(displayText.value || "").trim();
+              formState.setValue(props.name, displayValue);
+              formState.touchField(props.name);
+              formState.validateField(props.name);
+              formState.setSelectedIndex(props.name, -1);
+              formState.setFocus(props.name, false);
+            } else if (isNewValue.value && selectedIndex.value < 0) {
+              const displayValue = String(displayText.value || "").trim();
+              formState.setValue(props.name, displayValue);
+              formState.touchField(props.name);
+              formState.validateField(props.name);
+              formState.setSelectedIndex(props.name, -1);
+              formState.setFocus(props.name, false);
+            }
+            break;
+          case "Escape":
+            inputElement.value?.blur();
+            break;
+        }
+      },
+      name: props.name,
+      ...htmlAttrs
+    };
+    return /* @__PURE__ */ jsxs("label", { ref: comboboxRoot, class: "floating-label w-full", children: [
+      !props.hideLabel && /* @__PURE__ */ jsxs("span", { children: [
+        props.label || fieldMetadata.label,
+        fieldMetadata.isRequired && /* @__PURE__ */ jsx("span", { class: "text-error", children: " *" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { class: "relative", role: "combobox", "aria-expanded": showDropdown.value, "aria-haspopup": "listbox", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputElement,
+            class: inputClass,
+            placeholder: props.placeholder || "Search or type new value",
+            disabled: props.disabled,
+            autocomplete: "off",
+            "data-testid": `${formState.storeName}-combobox-field-${String(props.name)}`,
+            ...inputProps
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { class: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            class: "h-5 w-5 text-base-content/50",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8 9l4-4 4 4m0 6l-4 4-4-4" })
+          }
+        ) }),
+        showDropdown.value && /* @__PURE__ */ jsx("div", { class: "absolute z-50 w-full mt-1 bg-base-100 border border-base-300 rounded-box shadow-lg max-h-60 overflow-auto", children: filteredOptions.value.length > 0 || isNewValue.value ? /* @__PURE__ */ jsxs("ul", { id: "combobox-listbox", class: "menu w-full", role: "listbox", children: [
+          filteredOptions.value.map((option, index) => /* @__PURE__ */ jsx(
+            "li",
+            {
+              id: `option-${index}`,
+              role: "option",
+              "aria-selected": index === selectedIndex.value,
+              children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: "#",
+                  class: `w-full ${index === selectedIndex.value ? "menu-focus" : ""}`,
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    formState.setValue(props.name, option.value);
+                    displayText.value = option.label;
+                    formState.touchField(props.name);
+                    formState.validateField(props.name);
+                    formState.setSelectedIndex(props.name, -1);
+                    formState.setFocus(props.name, false);
+                  },
+                  children: option.label
+                }
+              )
+            },
+            option.value
+          )),
+          isNewValue.value && /* @__PURE__ */ jsx(
+            "li",
+            {
+              id: `option-new`,
+              role: "option",
+              "aria-selected": selectedIndex.value === filteredOptions.value.length,
+              children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: "#",
+                  class: `w-full ${selectedIndex.value === filteredOptions.value.length ? "menu-focus" : ""}`,
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const displayValue = String(displayText.value || "").trim();
+                    formState.setValue(props.name, displayValue);
+                    formState.touchField(props.name);
+                    formState.validateField(props.name);
+                    formState.setSelectedIndex(props.name, -1);
+                    formState.setFocus(props.name, false);
+                  },
+                  children: /* @__PURE__ */ jsxs("div", { class: "flex items-start gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        class: "h-5 w-5 text-success mt-0.5 flex-shrink-0",
+                        fill: "none",
+                        viewBox: "0 0 24 24",
+                        stroke: "currentColor",
+                        "stroke-width": "2",
+                        children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 4v16m8-8H4" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { class: "text-sm", children: [
+                      /* @__PURE__ */ jsx("p", { class: "font-medium text-success", children: "New value" }),
+                      /* @__PURE__ */ jsxs("p", { class: "text-base-content/70", children: [
+                        '"',
+                        displayText.value,
+                        '" will be saved.'
+                      ] })
+                    ] })
+                  ] })
+                }
+              )
+            }
+          )
+        ] }) : null })
+      ] }),
+      props.description && /* @__PURE__ */ jsx("p", { class: "text-sm mt-1", children: props.description }),
+      isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) }),
+      isNewValue.value && displayText.value && !hasErrors && /* @__PURE__ */ jsxs("p", { class: "text-success text-xs", children: [
+        '\u2713 New value "',
+        displayText.value,
+        '" will be saved.'
+      ] })
+    ] });
+  };
+  DaisyUIComboboxField.props = propsDefinition;
+  return DaisyUIComboboxField;
+}
 function createDaisyUICurrencyField() {
   const DaisyUICurrencyField = (props, { attrs }) => {
     const formState = inject(ZINIA_FORM_KEY);
@@ -4774,49 +5217,6 @@ var SELECT_FIELD_PROP_NAMES = [
   "valueToLabel",
   "useSchemaOptions"
 ];
-
-// src/utils/propNormalization.ts
-function camelToKebab(str) {
-  return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-}
-function getPropVariants(propsDefinition) {
-  const variants = /* @__PURE__ */ new Set();
-  if (Array.isArray(propsDefinition)) {
-    propsDefinition.forEach((propName) => {
-      variants.add(propName);
-      variants.add(camelToKebab(propName));
-    });
-  } else {
-    Object.keys(propsDefinition).forEach((propName) => {
-      variants.add(propName);
-      variants.add(camelToKebab(propName));
-    });
-  }
-  return variants;
-}
-function filterComponentPropsFromAttrs(propsDefinition, attrs) {
-  const propVariants = getPropVariants(propsDefinition);
-  const filtered = {};
-  for (const key in attrs) {
-    if (!propVariants.has(key)) {
-      filtered[key] = attrs[key];
-    }
-  }
-  return filtered;
-}
-function normalizePropsFromAttrs(props, propsDefinition, attrs) {
-  const propVariants = getPropVariants(propsDefinition);
-  const normalized = { ...props };
-  for (const key in attrs) {
-    if (propVariants.has(key)) {
-      const camelCaseKey = Array.isArray(propsDefinition) ? propsDefinition.find((p) => camelToKebab(p) === key) || key.replace(/-([a-z])/g, (_, c) => c.toUpperCase()) : Object.keys(propsDefinition).find((p) => camelToKebab(p) === key) || key.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-      if (!(camelCaseKey in normalized) || normalized[camelCaseKey] === void 0) {
-        normalized[camelCaseKey] = attrs[key];
-      }
-    }
-  }
-  return normalized;
-}
 function createDaisyUISelectField() {
   const propsDefinition = [...SELECT_FIELD_PROP_NAMES];
   const DaisyUISelectField = (props, { attrs }) => {
@@ -7375,6 +7775,7 @@ var daisyUIStyle = {
   createSearchField: createDaisyUISearchField,
   createTimeField: createDaisyUITimeField,
   createDateTimeLocalField: createDaisyUIDateTimeLocalField,
+  createComboboxField: createDaisyUIComboboxField,
   createArrayField: createDaisyUIArrayField,
   createTransferListField: createDaisyUITransferListField,
   createToppingsField: createDaisyUIToppingsField,