@letar/forms 1.0.3 → 1.2.0

package/chunk-MAYUFA5K.js

@@ -0,0 +1,822 @@
+import { createField, SelectionFieldLabel, FieldError, useAsyncSearch, FieldTooltip, getOptionLabel, useGroupedOptions, FieldWrapper, FieldLabel, useDeclarativeForm, useFormGroup, useResolvedFieldProps, getFieldErrors } from './chunk-XFWLD5EO.js';
+import { Field, Combobox, Spinner, Portal, useFilter, createListCollection, Fieldset, CheckboxGroup, HStack, Flex, CheckboxCard, Listbox, NativeSelect, RadioCard, RadioGroup, SegmentGroup, Select, TagsInput } from '@chakra-ui/react';
+import { useMemo, useCallback, useState, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var FieldAutocomplete = createField({
+  displayName: "FieldAutocomplete",
+  useFieldState: (componentProps) => {
+    const {
+      inputValue,
+      setInputValue,
+      isLoading,
+      data: queryData
+    } = useAsyncSearch({
+      useQuery: componentProps.useQuery,
+      debounce: componentProps.debounce ?? 300,
+      minChars: componentProps.minChars ?? 1
+    });
+    const { contains } = useFilter({ sensitivity: "base" });
+    const suggestions = useMemo(() => {
+      if (componentProps.suggestions) {
+        const filtered = inputValue ? componentProps.suggestions.filter((s) => contains(s, inputValue)) : componentProps.suggestions.slice(0, 10);
+        return filtered.map((s) => ({ label: s, value: s }));
+      }
+      if (queryData && componentProps.getLabel) {
+        const getLabel = componentProps.getLabel;
+        return queryData.map((item) => {
+          const itemLabel = getLabel(item);
+          return { label: itemLabel, value: itemLabel };
+        });
+      }
+      return [];
+    }, [componentProps.suggestions, queryData, componentProps.getLabel, inputValue, contains]);
+    const collection = useMemo(() => {
+      return createListCollection({
+        items: suggestions,
+        itemToString: (item) => item.label,
+        itemToValue: (item) => item.value
+      });
+    }, [suggestions]);
+    return {
+      inputValue,
+      setInputValue,
+      isLoading,
+      suggestions,
+      collection
+    };
+  },
+  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps, fieldState }) => {
+    const currentValue = field.state.value ?? "";
+    const minChars = componentProps.minChars ?? 1;
+    return /* @__PURE__ */ jsxs(
+      Field.Root,
+      {
+        invalid: hasError,
+        required: resolved.required,
+        disabled: resolved.disabled,
+        readOnly: resolved.readOnly,
+        children: [
+          /* @__PURE__ */ jsxs(
+            Combobox.Root,
+            {
+              collection: fieldState.collection,
+              size: componentProps.size ?? "md",
+              variant: componentProps.variant ?? "outline",
+              value: currentValue ? [currentValue] : [],
+              inputValue: fieldState.inputValue,
+              onInputValueChange: (details) => {
+                fieldState.setInputValue(details.inputValue);
+                field.handleChange(details.inputValue);
+              },
+              onValueChange: (details) => {
+                const newValue = details.value[0] ?? "";
+                fieldState.setInputValue(newValue);
+                field.handleChange(newValue);
+              },
+              onInteractOutside: () => field.handleBlur(),
+              disabled: resolved.disabled,
+              allowCustomValue: true,
+              openOnClick: true,
+              "data-field-name": fullPath,
+              children: [
+                resolved.label && /* @__PURE__ */ jsx(Combobox.Label, { children: /* @__PURE__ */ jsx(SelectionFieldLabel, { label: resolved.label, tooltip: resolved.tooltip, required: resolved.required }) }),
+                /* @__PURE__ */ jsxs(Combobox.Control, { children: [
+                  /* @__PURE__ */ jsx(Combobox.Input, { placeholder: resolved.placeholder ?? "Start typing..." }),
+                  /* @__PURE__ */ jsxs(Combobox.IndicatorGroup, { children: [
+                    fieldState.isLoading && /* @__PURE__ */ jsx(Spinner, { size: "xs" }),
+                    /* @__PURE__ */ jsx(Combobox.Trigger, {})
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsxs(Combobox.Content, { children: [
+                  fieldState.isLoading && fieldState.suggestions.length === 0 && /* @__PURE__ */ jsx(Combobox.Empty, { children: componentProps.loadingMessage ?? "Loading..." }),
+                  !fieldState.isLoading && fieldState.suggestions.length === 0 && fieldState.inputValue.length >= minChars && /* @__PURE__ */ jsx(Combobox.Empty, { children: componentProps.emptyMessage ?? "No suggestions" }),
+                  !fieldState.isLoading && fieldState.suggestions.length === 0 && fieldState.inputValue.length < minChars && fieldState.inputValue.length > 0 && /* @__PURE__ */ jsxs(Combobox.Empty, { children: [
+                    "Enter at least ",
+                    minChars,
+                    " characters"
+                  ] }),
+                  fieldState.suggestions.map((item) => /* @__PURE__ */ jsxs(Combobox.Item, { item, children: [
+                    /* @__PURE__ */ jsx(Combobox.ItemText, { children: item.label }),
+                    /* @__PURE__ */ jsx(Combobox.ItemIndicator, {})
+                  ] }, item.value))
+                ] }) }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
+        ]
+      }
+    );
+  }
+});
+var FieldCheckboxCard = createField({
+  displayName: "FieldCheckboxCard",
+  render: ({ field, resolved, hasError, errorMessage, componentProps }) => {
+    const currentValue = field.state.value;
+    const valueArray = currentValue ?? [];
+    return /* @__PURE__ */ jsxs(Fieldset.Root, { invalid: hasError, disabled: resolved.disabled, children: [
+      /* @__PURE__ */ jsxs(
+        CheckboxGroup,
+        {
+          value: valueArray,
+          onValueChange: (value) => field.handleChange(value),
+          disabled: resolved.disabled,
+          invalid: hasError,
+          children: [
+            resolved.label && /* @__PURE__ */ jsxs(Fieldset.Legend, { mb: 2, children: [
+              resolved.tooltip ? /* @__PURE__ */ jsxs(HStack, { gap: 1, children: [
+                /* @__PURE__ */ jsx("span", { children: resolved.label }),
+                /* @__PURE__ */ jsx(FieldTooltip, { ...resolved.tooltip })
+              ] }) : resolved.label,
+              resolved.required && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  role: "presentation",
+                  "aria-hidden": "true",
+                  style: { color: "var(--chakra-colors-fg-error)", marginInlineStart: "1px" },
+                  children: "*"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Flex,
+              {
+                gap: componentProps.gap ?? 2,
+                direction: (componentProps.orientation ?? "horizontal") === "vertical" ? "column" : "row",
+                wrap: (componentProps.orientation ?? "horizontal") === "horizontal" ? "wrap" : void 0,
+                children: componentProps.options.map((opt) => /* @__PURE__ */ jsxs(
+                  CheckboxCard.Root,
+                  {
+                    value: opt.value,
+                    size: componentProps.size ?? "md",
+                    variant: componentProps.variant ?? "outline",
+                    colorPalette: componentProps.colorPalette,
+                    align: componentProps.align ?? "start",
+                    disabled: opt.disabled,
+                    children: [
+                      /* @__PURE__ */ jsx(CheckboxCard.HiddenInput, {}),
+                      /* @__PURE__ */ jsxs(CheckboxCard.Control, { children: [
+                        /* @__PURE__ */ jsxs(CheckboxCard.Content, { children: [
+                          opt.icon,
+                          /* @__PURE__ */ jsx(CheckboxCard.Label, { children: opt.label }),
+                          opt.description && /* @__PURE__ */ jsx(CheckboxCard.Description, { children: opt.description })
+                        ] }),
+                        /* @__PURE__ */ jsx(CheckboxCard.Indicator, {})
+                      ] })
+                    ]
+                  },
+                  opt.value
+                ))
+              }
+            )
+          ]
+        }
+      ),
+      hasError ? /* @__PURE__ */ jsx(Fieldset.ErrorText, { children: errorMessage }) : resolved.helperText && /* @__PURE__ */ jsx(Fieldset.HelperText, { children: resolved.helperText })
+    ] });
+  }
+});
+var FieldCombobox = createField({
+  displayName: "FieldCombobox",
+  useFieldState: (componentProps, resolved) => {
+    const {
+      inputValue,
+      setInputValue,
+      isLoading,
+      data: queryData
+    } = useAsyncSearch({
+      useQuery: componentProps.useQuery,
+      debounce: componentProps.debounce ?? 300,
+      minChars: componentProps.minChars ?? 1
+    });
+    const { contains } = useFilter({ sensitivity: "base" });
+    const options = useMemo(() => {
+      if (componentProps.options) {
+        if (!inputValue) {
+          return componentProps.options;
+        }
+        return componentProps.options.filter((opt) => {
+          return contains(getOptionLabel(opt), inputValue);
+        });
+      }
+      if (queryData && componentProps.getLabel && componentProps.getValue) {
+        const getLabel = componentProps.getLabel;
+        const getValue = componentProps.getValue;
+        return queryData.map((item) => ({
+          label: getLabel(item),
+          value: getValue(item),
+          group: componentProps.getGroup?.(item),
+          disabled: componentProps.getDisabled?.(item)
+        }));
+      }
+      return [];
+    }, [
+      componentProps.options,
+      queryData,
+      componentProps.getLabel,
+      componentProps.getValue,
+      componentProps.getGroup,
+      componentProps.getDisabled,
+      inputValue,
+      contains
+    ]);
+    const { collection, groups } = useGroupedOptions(options);
+    const resolvedClearable = componentProps.clearable ?? !resolved.required;
+    return {
+      inputValue,
+      setInputValue,
+      isLoading,
+      options,
+      collection,
+      groups,
+      resolvedClearable
+    };
+  },
+  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps, fieldState }) => {
+    const currentValue = field.state.value;
+    const minChars = componentProps.minChars ?? 1;
+    return /* @__PURE__ */ jsxs(Field.Root, { invalid: hasError, required: resolved.required, disabled: resolved.disabled, children: [
+      /* @__PURE__ */ jsxs(
+        Combobox.Root,
+        {
+          collection: fieldState.collection,
+          size: componentProps.size ?? "md",
+          variant: componentProps.variant ?? "outline",
+          value: currentValue ? [currentValue] : [],
+          inputValue: fieldState.inputValue,
+          onInputValueChange: (details) => fieldState.setInputValue(details.inputValue),
+          onValueChange: (details) => {
+            const newValue = details.value[0];
+            field.handleChange(newValue ?? "");
+          },
+          onInteractOutside: () => field.handleBlur(),
+          disabled: resolved.disabled,
+          allowCustomValue: componentProps.allowCustomValue ?? false,
+          openOnClick: true,
+          "data-field-name": fullPath,
+          children: [
+            resolved.label && /* @__PURE__ */ jsx(Combobox.Label, { children: /* @__PURE__ */ jsx(SelectionFieldLabel, { label: resolved.label, tooltip: resolved.tooltip, required: resolved.required }) }),
+            /* @__PURE__ */ jsxs(Combobox.Control, { children: [
+              /* @__PURE__ */ jsx(Combobox.Input, { placeholder: resolved.placeholder ?? "Search..." }),
+              /* @__PURE__ */ jsxs(Combobox.IndicatorGroup, { children: [
+                fieldState.isLoading && /* @__PURE__ */ jsx(Spinner, { size: "xs" }),
+                fieldState.resolvedClearable && /* @__PURE__ */ jsx(Combobox.ClearTrigger, {}),
+                /* @__PURE__ */ jsx(Combobox.Trigger, {})
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsxs(Combobox.Content, { children: [
+              fieldState.isLoading && fieldState.options.length === 0 && /* @__PURE__ */ jsx(Combobox.Empty, { children: componentProps.loadingMessage ?? "Loading..." }),
+              !fieldState.isLoading && fieldState.options.length === 0 && fieldState.inputValue.length >= minChars && /* @__PURE__ */ jsx(Combobox.Empty, { children: componentProps.emptyMessage ?? "Nothing found" }),
+              !fieldState.isLoading && fieldState.options.length === 0 && fieldState.inputValue.length < minChars && fieldState.inputValue.length > 0 && /* @__PURE__ */ jsxs(Combobox.Empty, { children: [
+                "Enter at least ",
+                minChars,
+                " characters"
+              ] }),
+              fieldState.groups ? Array.from(fieldState.groups.entries()).map(([groupName, groupOptions]) => /* @__PURE__ */ jsxs(Combobox.ItemGroup, { children: [
+                groupName && /* @__PURE__ */ jsx(Combobox.ItemGroupLabel, { children: groupName }),
+                groupOptions.map((opt) => /* @__PURE__ */ jsxs(Combobox.Item, { item: opt, children: [
+                  /* @__PURE__ */ jsx(Combobox.ItemText, { children: getOptionLabel(opt) }),
+                  /* @__PURE__ */ jsx(Combobox.ItemIndicator, {})
+                ] }, opt.value))
+              ] }, groupName)) : (
+                /* Flat options */
+                fieldState.options.map((opt) => /* @__PURE__ */ jsxs(Combobox.Item, { item: opt, children: [
+                  /* @__PURE__ */ jsx(Combobox.ItemText, { children: getOptionLabel(opt) }),
+                  /* @__PURE__ */ jsx(Combobox.ItemIndicator, {})
+                ] }, opt.value))
+              )
+            ] }) }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
+    ] });
+  }
+});
+var FieldListbox = createField({
+  displayName: "FieldListbox",
+  useFieldState: (componentProps) => {
+    return useGroupedOptions(componentProps.options);
+  },
+  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps, fieldState }) => {
+    const currentValue = field.state.value;
+    const valueArray = Array.isArray(currentValue) ? currentValue : currentValue ? [currentValue] : [];
+    const selectionMode = componentProps.selectionMode ?? "single";
+    return /* @__PURE__ */ jsxs(
+      Field.Root,
+      {
+        invalid: hasError,
+        required: resolved.required,
+        disabled: resolved.disabled,
+        readOnly: resolved.readOnly,
+        children: [
+          /* @__PURE__ */ jsxs(
+            Listbox.Root,
+            {
+              collection: fieldState.collection,
+              selectionMode,
+              orientation: componentProps.orientation ?? "vertical",
+              variant: componentProps.variant ?? "subtle",
+              colorPalette: componentProps.colorPalette,
+              value: valueArray,
+              onValueChange: (details) => {
+                if (selectionMode === "single") {
+                  const newValue = details.value[0];
+                  field.handleChange(newValue ?? "");
+                } else {
+                  field.handleChange(details.value);
+                }
+              },
+              disabled: resolved.disabled,
+              "data-field-name": fullPath,
+              children: [
+                resolved.label && /* @__PURE__ */ jsx(Listbox.Label, { fontSize: componentProps.size ?? "md", children: /* @__PURE__ */ jsx(SelectionFieldLabel, { label: resolved.label, tooltip: resolved.tooltip, required: resolved.required }) }),
+                /* @__PURE__ */ jsx(Listbox.Content, { maxH: componentProps.maxHeight, children: fieldState.groups ? (
+                  /* Grouped options */
+                  Array.from(fieldState.groups.entries()).map(([groupName, groupOptions]) => /* @__PURE__ */ jsxs(Listbox.ItemGroup, { children: [
+                    groupName && /* @__PURE__ */ jsx(Listbox.ItemGroupLabel, { children: groupName }),
+                    groupOptions.map((opt) => /* @__PURE__ */ jsxs(Listbox.Item, { item: opt, children: [
+                      /* @__PURE__ */ jsx(Listbox.ItemText, { children: getOptionLabel(opt) }),
+                      /* @__PURE__ */ jsx(Listbox.ItemIndicator, {})
+                    ] }, opt.value))
+                  ] }, groupName))
+                ) : (
+                  /* Flat options */
+                  componentProps.options.map((opt) => /* @__PURE__ */ jsxs(Listbox.Item, { item: opt, children: [
+                    /* @__PURE__ */ jsx(Listbox.ItemText, { children: getOptionLabel(opt) }),
+                    /* @__PURE__ */ jsx(Listbox.ItemIndicator, {})
+                  ] }, opt.value))
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
+        ]
+      }
+    );
+  }
+});
+var FieldNativeSelect = createField({
+  displayName: "FieldNativeSelect",
+  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps }) => /* @__PURE__ */ jsx(FieldWrapper, { resolved, hasError, errorMessage, fullPath, children: /* @__PURE__ */ jsxs(NativeSelect.Root, { children: [
+    /* @__PURE__ */ jsxs(
+      NativeSelect.Field,
+      {
+        value: field.state.value ?? "",
+        onChange: (e) => field.handleChange(e.target.value),
+        onBlur: field.handleBlur,
+        "data-field-name": fullPath,
+        children: [
+          resolved.placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: resolved.placeholder }),
+          componentProps.options.map((opt, idx) => /* @__PURE__ */ jsx("option", { value: opt.value, children: typeof opt.title === "string" ? opt.title : opt.value }, idx))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(NativeSelect.Indicator, {})
+  ] }) })
+});
+var FieldRadioCard = createField({
+  displayName: "FieldRadioCard",
+  useFieldState: (componentProps) => {
+    const enabledOptions = componentProps.options.filter((opt) => !opt.disabled);
+    const handleKeyDown = useCallback(
+      (e, currentValue, handleChange) => {
+        if (!componentProps.keyboardNavigation || enabledOptions.length === 0) {
+          return;
+        }
+        const isHorizontal = (componentProps.orientation ?? "horizontal") === "horizontal";
+        const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+        const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+        if (e.key !== prevKey && e.key !== nextKey) {
+          return;
+        }
+        e.preventDefault();
+        const currentIndex = currentValue ? enabledOptions.findIndex((opt) => opt.value === currentValue) : -1;
+        let newIndex;
+        if (e.key === nextKey) {
+          newIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % enabledOptions.length;
+        } else {
+          newIndex = currentIndex === -1 ? enabledOptions.length - 1 : (currentIndex - 1 + enabledOptions.length) % enabledOptions.length;
+        }
+        handleChange(enabledOptions[newIndex].value);
+      },
+      [componentProps.keyboardNavigation, enabledOptions, componentProps.orientation]
+    );
+    return { enabledOptions, handleKeyDown };
+  },
+  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps, fieldState }) => {
+    const currentValue = field.state.value;
+    return /* @__PURE__ */ jsxs(
+      Field.Root,
+      {
+        invalid: hasError,
+        required: resolved.required,
+        disabled: resolved.disabled,
+        readOnly: resolved.readOnly,
+        children: [
+          /* @__PURE__ */ jsxs(
+            RadioCard.Root,
+            {
+              value: currentValue ?? "",
+              onValueChange: (details) => field.handleChange(details.value),
+              onKeyDown: componentProps.keyboardNavigation ? (e) => fieldState.handleKeyDown(e, currentValue, field.handleChange) : void 0,
+              disabled: resolved.disabled,
+              name: fullPath,
+              size: componentProps.size ?? "md",
+              variant: componentProps.variant ?? "outline",
+              colorPalette: componentProps.colorPalette,
+              align: componentProps.align ?? "start",
+              orientation: componentProps.orientation ?? "horizontal",
+              gap: componentProps.gap ?? 2,
+              children: [
+                resolved.label && /* @__PURE__ */ jsx(RadioCard.Label, { children: /* @__PURE__ */ jsx(SelectionFieldLabel, { label: resolved.label, tooltip: resolved.tooltip, required: resolved.required }) }),
+                componentProps.options.map((opt) => /* @__PURE__ */ jsxs(RadioCard.Item, { value: opt.value, disabled: opt.disabled, children: [
+                  /* @__PURE__ */ jsx(RadioCard.ItemHiddenInput, {}),
+                  /* @__PURE__ */ jsxs(RadioCard.ItemControl, { children: [
+                    /* @__PURE__ */ jsxs(RadioCard.ItemContent, { children: [
+                      opt.icon,
+                      /* @__PURE__ */ jsx(RadioCard.ItemText, { children: opt.label }),
+                      opt.description && /* @__PURE__ */ jsx(RadioCard.ItemDescription, { children: opt.description })
+                    ] }),
+                    /* @__PURE__ */ jsx(RadioCard.ItemIndicator, {})
+                  ] })
+                ] }, opt.value))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
+        ]
+      }
+    );
+  }
+});
+var FieldRadioGroup = createField({
+  displayName: "FieldRadioGroup",
+  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps }) => /* @__PURE__ */ jsxs(
+    Field.Root,
+    {
+      invalid: hasError,
+      required: resolved.required,
+      disabled: resolved.disabled,
+      readOnly: resolved.readOnly,
+      children: [
+        /* @__PURE__ */ jsx(FieldLabel, { label: resolved.label, tooltip: resolved.tooltip, required: resolved.required }),
+        /* @__PURE__ */ jsx(
+          RadioGroup.Root,
+          {
+            value: field.state.value ?? void 0,
+            onValueChange: (details) => field.handleChange(details.value),
+            orientation: componentProps.orientation ?? "vertical",
+            size: componentProps.size ?? "md",
+            variant: componentProps.variant ?? "solid",
+            colorPalette: componentProps.colorPalette ?? "brand",
+            disabled: resolved.disabled,
+            readOnly: resolved.readOnly,
+            "data-field-name": fullPath,
+            display: "flex",
+            flexDirection: componentProps.orientation === "horizontal" ? "row" : "column",
+            gap: componentProps.orientation === "horizontal" ? 4 : 2,
+            flexWrap: "wrap",
+            children: componentProps.options.map((opt) => /* @__PURE__ */ jsxs(RadioGroup.Item, { value: opt.value, disabled: opt.disabled, children: [
+              /* @__PURE__ */ jsx(RadioGroup.ItemHiddenInput, { onBlur: field.handleBlur }),
+              /* @__PURE__ */ jsx(RadioGroup.ItemIndicator, {}),
+              /* @__PURE__ */ jsx(RadioGroup.ItemText, { children: getOptionLabel(opt) })
+            ] }, opt.value))
+          }
+        ),
+        /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
+      ]
+    }
+  )
+});
+var FieldSegmentedGroup = createField({
+  displayName: "FieldSegmentedGroup",
+  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps }) => /* @__PURE__ */ jsxs(
+    Field.Root,
+    {
+      invalid: hasError,
+      required: resolved.required,
+      disabled: resolved.disabled,
+      readOnly: resolved.readOnly,
+      children: [
+        /* @__PURE__ */ jsx(FieldLabel, { label: resolved.label, tooltip: resolved.tooltip, required: resolved.required }),
+        /* @__PURE__ */ jsxs(
+          SegmentGroup.Root,
+          {
+            value: field.state.value ?? "",
+            onValueChange: (details) => field.handleChange(details.value),
+            disabled: resolved.disabled,
+            name: fullPath,
+            size: componentProps.size ?? "md",
+            orientation: componentProps.orientation ?? "horizontal",
+            colorPalette: componentProps.colorPalette,
+            children: [
+              /* @__PURE__ */ jsx(SegmentGroup.Indicator, {}),
+              componentProps.options.map((opt) => /* @__PURE__ */ jsxs(SegmentGroup.Item, { value: opt.value, disabled: opt.disabled, children: [
+                /* @__PURE__ */ jsx(SegmentGroup.ItemText, { children: opt.label }),
+                /* @__PURE__ */ jsx(SegmentGroup.ItemHiddenInput, {})
+              ] }, opt.value))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
+      ]
+    }
+  )
+});
+var FieldSelect = createField({
+  displayName: "FieldSelect",
+  useFieldState: (componentProps, resolved) => {
+    const sourceOptions = componentProps.options ?? resolved.options ?? [];
+    const normalizedOptions = useMemo(
+      () => sourceOptions.map((opt) => ({
+        label: opt.label,
+        value: String(opt.value),
+        disabled: opt.disabled
+      })),
+      [sourceOptions]
+    );
+    const collection = useMemo(
+      () => createListCollection({
+        items: normalizedOptions,
+        itemToString: getOptionLabel,
+        itemToValue: (item) => item.value
+      }),
+      [normalizedOptions]
+    );
+    const resolvedClearable = componentProps.clearable ?? !resolved.required;
+    return { collection, normalizedOptions, resolvedClearable };
+  },
+  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps, fieldState }) => {
+    const currentValue = field.state.value;
+    const stringValue = currentValue !== null && currentValue !== void 0 ? String(currentValue) : void 0;
+    return /* @__PURE__ */ jsxs(Field.Root, { invalid: hasError, required: resolved.required, disabled: resolved.disabled, children: [
+      /* @__PURE__ */ jsxs(
+        Select.Root,
+        {
+          collection: fieldState.collection,
+          size: componentProps.size ?? "md",
+          variant: componentProps.variant ?? "outline",
+          value: stringValue ? [stringValue] : [],
+          onValueChange: (details) => {
+            const newStringValue = details.value[0];
+            if (componentProps.valueType === "number") {
+              field.handleChange(newStringValue ? Number(newStringValue) : 0);
+            } else {
+              field.handleChange(newStringValue ?? "");
+            }
+          },
+          onInteractOutside: () => field.handleBlur(),
+          disabled: resolved.disabled,
+          "data-field-name": fullPath,
+          children: [
+            /* @__PURE__ */ jsx(Select.HiddenSelect, {}),
+            resolved.label && /* @__PURE__ */ jsx(Select.Label, { children: /* @__PURE__ */ jsx(SelectionFieldLabel, { label: resolved.label, tooltip: resolved.tooltip, required: resolved.required }) }),
+            /* @__PURE__ */ jsxs(Select.Control, { children: [
+              /* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.ValueText, { placeholder: resolved.placeholder }) }),
+              /* @__PURE__ */ jsxs(Select.IndicatorGroup, { children: [
+                fieldState.resolvedClearable && /* @__PURE__ */ jsx(Select.ClearTrigger, {}),
+                /* @__PURE__ */ jsx(Select.Indicator, {})
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Content, { children: fieldState.normalizedOptions.map((opt) => /* @__PURE__ */ jsxs(Select.Item, { item: opt, children: [
+              getOptionLabel(opt),
+              /* @__PURE__ */ jsx(Select.ItemIndicator, {})
+            ] }, opt.value)) }) }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
+    ] });
+  }
+});
+var FieldTags = createField({
+  displayName: "FieldTags",
+  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps }) => {
+    const {
+      maxTags,
+      minTagLength = 1,
+      delimiter,
+      addOnBlur = false,
+      addOnPaste = true,
+      editable = false,
+      clearable = false,
+      size = "md",
+      variant = "outline",
+      colorPalette
+    } = componentProps;
+    const value = field.state.value ?? [];
+    const handleValueChange = (details) => {
+      field.handleChange(details.value);
+    };
+    const validateTag = (details) => {
+      return details.inputValue.length >= minTagLength;
+    };
+    return /* @__PURE__ */ jsxs(
+      Field.Root,
+      {
+        invalid: hasError,
+        required: resolved.required,
+        disabled: resolved.disabled,
+        readOnly: resolved.readOnly,
+        children: [
+          /* @__PURE__ */ jsxs(
+            TagsInput.Root,
+            {
+              value,
+              onValueChange: handleValueChange,
+              max: maxTags,
+              validate: validateTag,
+              delimiter,
+              blurBehavior: addOnBlur ? "add" : void 0,
+              addOnPaste,
+              editable,
+              disabled: resolved.disabled,
+              readOnly: resolved.readOnly,
+              size,
+              variant,
+              colorPalette,
+              "data-field-name": fullPath,
+              children: [
+                resolved.label && /* @__PURE__ */ jsx(TagsInput.Label, { children: /* @__PURE__ */ jsx(SelectionFieldLabel, { label: resolved.label, tooltip: resolved.tooltip, required: resolved.required }) }),
+                /* @__PURE__ */ jsxs(TagsInput.Control, { children: [
+                  /* @__PURE__ */ jsx(TagsInput.Items, {}),
+                  /* @__PURE__ */ jsx(TagsInput.Input, { placeholder: resolved.placeholder, onBlur: field.handleBlur }),
+                  clearable && /* @__PURE__ */ jsx(TagsInput.ClearTrigger, {})
+                ] }),
+                /* @__PURE__ */ jsx(TagsInput.HiddenInput, {})
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
+        ]
+      }
+    );
+  }
+});
+function CascadingSelectContent({
+  parentValue,
+  form,
+  fullPath,
+  resolved,
+  loadOptions,
+  initialOptions,
+  clearOnParentChange,
+  disableWhenParentEmpty,
+  clearable,
+  size,
+  variant,
+  placeholderWhenDisabled
+}) {
+  const [options, setOptions] = useState(initialOptions);
+  const [isLoading, setIsLoading] = useState(false);
+  const prevParentValueRef = useRef(parentValue);
+  const loadOptionsRef = useRef(loadOptions);
+  loadOptionsRef.current = loadOptions;
+  useEffect(() => {
+    const doLoad = async () => {
+      if (parentValue === void 0 || parentValue === null || parentValue === "") {
+        setOptions(initialOptions);
+        return;
+      }
+      setIsLoading(true);
+      try {
+        const result = await loadOptionsRef.current(parentValue);
+        const newOptions = Array.isArray(result) ? result : result.options;
+        setOptions(newOptions);
+      } catch (error) {
+        console.error("Error loading cascading select options:", error);
+        setOptions([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    void doLoad();
+  }, [parentValue, initialOptions]);
+  useEffect(() => {
+    if (clearOnParentChange && prevParentValueRef.current !== parentValue) {
+      if (prevParentValueRef.current !== void 0) {
+        form.setFieldValue(fullPath, "");
+      }
+      prevParentValueRef.current = parentValue;
+    }
+  }, [parentValue, clearOnParentChange, form, fullPath]);
+  const isParentEmpty = parentValue === void 0 || parentValue === null || parentValue === "";
+  const isDisabled = resolved.disabled || disableWhenParentEmpty && isParentEmpty;
+  const effectivePlaceholder = isParentEmpty && placeholderWhenDisabled ? placeholderWhenDisabled : resolved.placeholder;
+  const resolvedClearable = clearable ?? !resolved.required;
+  const collection = useMemo(
+    () => createListCollection({
+      items: options,
+      itemToString: getOptionLabel,
+      itemToValue: (item) => item.value
+    }),
+    [options]
+  );
+  return /* @__PURE__ */ jsx(form.Field, { name: fullPath, children: (field) => {
+    const { hasError, errorMessage } = getFieldErrors(field);
+    const currentValue = field.state.value;
+    return /* @__PURE__ */ jsxs(Field.Root, { invalid: hasError, required: resolved.required, disabled: isDisabled, children: [
+      /* @__PURE__ */ jsxs(
+        Select.Root,
+        {
+          collection,
+          size,
+          variant,
+          value: currentValue ? [currentValue] : [],
+          onValueChange: (details) => {
+            const newValue = details.value[0];
+            field.handleChange(newValue ?? "");
+          },
+          onInteractOutside: () => field.handleBlur(),
+          disabled: isDisabled,
+          "data-field-name": fullPath,
+          children: [
+            /* @__PURE__ */ jsx(Select.HiddenSelect, {}),
+            resolved.label && /* @__PURE__ */ jsx(Select.Label, { children: /* @__PURE__ */ jsx(SelectionFieldLabel, { label: resolved.label, tooltip: resolved.tooltip, required: resolved.required }) }),
+            /* @__PURE__ */ jsxs(Select.Control, { children: [
+              /* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.ValueText, { placeholder: effectivePlaceholder }) }),
+              /* @__PURE__ */ jsxs(Select.IndicatorGroup, { children: [
+                isLoading && /* @__PURE__ */ jsx(Spinner, { size: "xs" }),
+                resolvedClearable && !isLoading && /* @__PURE__ */ jsx(Select.ClearTrigger, {}),
+                /* @__PURE__ */ jsx(Select.Indicator, {})
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Content, { children: options.map((opt) => /* @__PURE__ */ jsxs(Select.Item, { item: opt, children: [
+              getOptionLabel(opt),
+              /* @__PURE__ */ jsx(Select.ItemIndicator, {})
+            ] }, opt.value)) }) }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(FieldError, { hasError: !!hasError, errorMessage, helperText: resolved.helperText })
+    ] });
+  } });
+}
+function FieldCascadingSelect(props) {
+  const {
+    name,
+    dependsOn,
+    loadOptions,
+    initialOptions = [],
+    clearOnParentChange = true,
+    disableWhenParentEmpty = true,
+    clearable,
+    size = "md",
+    variant = "outline",
+    placeholderWhenDisabled,
+    ...baseProps
+  } = props;
+  const { form } = useDeclarativeForm();
+  const parentGroup = useFormGroup();
+  const { form: _formFromProps, fullPath, ...resolvedRest } = useResolvedFieldProps(name, baseProps);
+  const resolved = {
+    label: resolvedRest.label,
+    placeholder: resolvedRest.placeholder,
+    helperText: resolvedRest.helperText,
+    tooltip: resolvedRest.tooltip,
+    required: resolvedRest.required,
+    disabled: resolvedRest.disabled,
+    readOnly: resolvedRest.readOnly,
+    constraints: resolvedRest.constraints,
+    options: resolvedRest.options,
+    autocomplete: resolvedRest.autocomplete
+  };
+  const fullDependsOnPath = parentGroup ? `${parentGroup.name}.${dependsOn}` : dependsOn;
+  const parentSelector = (state) => {
+    const parts = fullDependsOnPath.split(".");
+    let value = state.values;
+    for (const part of parts) {
+      if (value && typeof value === "object") {
+        value = value[part];
+      } else {
+        value = void 0;
+        break;
+      }
+    }
+    return value;
+  };
+  return /* @__PURE__ */ jsx(form.Subscribe, { selector: parentSelector, children: (parentValue) => /* @__PURE__ */ jsx(
+    CascadingSelectContent,
+    {
+      parentValue,
+      form,
+      fullPath,
+      resolved,
+      loadOptions,
+      initialOptions,
+      clearOnParentChange,
+      disableWhenParentEmpty,
+      clearable,
+      size,
+      variant,
+      placeholderWhenDisabled
+    }
+  ) });
+}
+FieldCascadingSelect.displayName = "FieldCascadingSelect";
+
+export { FieldAutocomplete, FieldCascadingSelect, FieldCheckboxCard, FieldCombobox, FieldListbox, FieldNativeSelect, FieldRadioCard, FieldRadioGroup, FieldSegmentedGroup, FieldSelect, FieldTags };
+//# sourceMappingURL=chunk-MAYUFA5K.js.map
+//# sourceMappingURL=chunk-MAYUFA5K.js.map