@letar/forms 1.1.0 → 1.2.0

package/chunk-GOELIS6T.js

@@ -1,849 +0,0 @@
-import { createField, FieldLabel, FieldError, useDebounce, FieldTooltip, FieldWrapper, useDeclarativeForm, useDeclarativeFormOptional } from './chunk-HWVOFWAT.js';
-import { Field, Box, Input, Spinner, List, Text, parseColor, ColorPicker, HStack, Portal, FileUpload, Button, Icon, PinInput, Group, useFileUploadContext, Float, IconButton } from '@chakra-ui/react';
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { LuUpload, LuX, LuFile } from 'react-icons/lu';
-import { withMask } from 'use-mask-input';
-
-// src/lib/declarative/form-fields/specialized/providers/dadata.ts
-var DADATA_URL = "https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/address";
-function createDaDataProvider(config) {
-  const { token, baseUrl = DADATA_URL } = config;
-  return {
-    async getSuggestions(query, options) {
-      const body = {
-        query,
-        count: options?.count ?? 10
-      };
-      if (options?.bounds) {
-        if (options.bounds.from) body.from_bound = { value: options.bounds.from };
-        if (options.bounds.to) body.to_bound = { value: options.bounds.to };
-      }
-      if (options?.filters) {
-        body.locations = [options.filters];
-      }
-      const response = await fetch(baseUrl, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Accept: "application/json",
-          Authorization: `Token ${token}`
-        },
-        body: JSON.stringify(body)
-      });
-      if (!response.ok) {
-        return [];
-      }
-      const data = await response.json();
-      const suggestions = data.suggestions ?? [];
-      return suggestions.map(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (s) => ({
-          label: s.value,
-          value: s.value,
-          data: s.data
-        })
-      );
-    }
-  };
-}
-function useAddressProvider(propProvider, token) {
-  const formContext = useDeclarativeFormOptional();
-  if (propProvider) return propProvider;
-  if (formContext?.addressProvider) return formContext.addressProvider;
-  if (token) return createDaDataProvider({ token });
-  return null;
-}
-var FieldAddress = createField({
-  displayName: "FieldAddress",
-  useFieldState: (props) => {
-    const { provider: propProvider, token, minChars = 3, debounceMs = 300, locations } = props;
-    const provider = useAddressProvider(propProvider, token);
-    const [inputValue, setInputValue] = useState("");
-    const [suggestions, setSuggestions] = useState([]);
-    const [isLoading, setIsLoading] = useState(false);
-    const [isOpen, setIsOpen] = useState(false);
-    const [highlightedIndex, setHighlightedIndex] = useState(-1);
-    const containerRef = useRef(null);
-    const initializedRef = useRef(false);
-    const debouncedQuery = useDebounce(inputValue, debounceMs);
-    const fetchSuggestions = useCallback(
-      async (query) => {
-        if (query.length < minChars || !provider) {
-          setSuggestions([]);
-          return;
-        }
-        setIsLoading(true);
-        try {
-          const results = await provider.getSuggestions(query, {
-            count: 10,
-            filters: locations ? Object.assign({}, ...locations) : void 0
-          });
-          setSuggestions(results);
-          setIsOpen(true);
-        } catch (error) {
-          console.error("Error loading address suggestions:", error);
-          setSuggestions([]);
-        } finally {
-          setIsLoading(false);
-        }
-      },
-      [provider, minChars, locations]
-    );
-    useEffect(() => {
-      if (debouncedQuery) {
-        fetchSuggestions(debouncedQuery);
-      } else {
-        setSuggestions([]);
-        setIsOpen(false);
-      }
-    }, [debouncedQuery, fetchSuggestions]);
-    useEffect(() => {
-      const handleClickOutside = (event) => {
-        if (containerRef.current && !containerRef.current.contains(event.target)) {
-          setIsOpen(false);
-        }
-      };
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, []);
-    return {
-      inputValue,
-      setInputValue,
-      suggestions,
-      setSuggestions,
-      isLoading,
-      setIsLoading,
-      isOpen,
-      setIsOpen,
-      highlightedIndex,
-      setHighlightedIndex,
-      containerRef,
-      debouncedQuery,
-      fetchSuggestions,
-      initializedRef
-    };
-  },
-  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps, fieldState }) => {
-    const { valueOnly = false } = componentProps;
-    const {
-      inputValue,
-      setInputValue,
-      suggestions,
-      setSuggestions,
-      isLoading,
-      isOpen,
-      setIsOpen,
-      highlightedIndex,
-      setHighlightedIndex,
-      containerRef,
-      initializedRef
-    } = fieldState;
-    const fieldValue = field.state.value;
-    if (!initializedRef.current && fieldValue) {
-      const displayValue = typeof fieldValue === "string" ? fieldValue : fieldValue.value;
-      if (displayValue && displayValue !== inputValue) {
-        setInputValue(displayValue);
-      }
-      initializedRef.current = true;
-    }
-    const handleSelect = (suggestion) => {
-      setInputValue(suggestion.value);
-      setIsOpen(false);
-      setSuggestions([]);
-      if (valueOnly) {
-        field.handleChange(suggestion.value);
-      } else {
-        const addressValue = {
-          value: suggestion.value,
-          data: suggestion.data
-        };
-        field.handleChange(addressValue);
-      }
-    };
-    const handleKeyDown = (e) => {
-      if (!isOpen || suggestions.length === 0) {
-        return;
-      }
-      switch (e.key) {
-        case "ArrowDown":
-          e.preventDefault();
-          setHighlightedIndex(highlightedIndex < suggestions.length - 1 ? highlightedIndex + 1 : 0);
-          break;
-        case "ArrowUp":
-          e.preventDefault();
-          setHighlightedIndex(highlightedIndex > 0 ? highlightedIndex - 1 : suggestions.length - 1);
-          break;
-        case "Enter":
-          e.preventDefault();
-          if (highlightedIndex >= 0) {
-            handleSelect(suggestions[highlightedIndex]);
-          }
-          break;
-        case "Escape":
-          setIsOpen(false);
-          break;
-      }
-    };
-    return /* @__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(Box, { ref: containerRef, position: "relative", width: "100%", children: [
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                value: inputValue,
-                onChange: (e) => {
-                  setInputValue(e.target.value);
-                  setHighlightedIndex(-1);
-                },
-                onFocus: () => {
-                  if (suggestions.length > 0) {
-                    setIsOpen(true);
-                  }
-                },
-                onBlur: field.handleBlur,
-                onKeyDown: handleKeyDown,
-                placeholder: resolved.placeholder ?? "Start typing address...",
-                "data-field-name": fullPath
-              }
-            ),
-            isLoading && /* @__PURE__ */ jsx(Box, { position: "absolute", right: 3, top: "50%", transform: "translateY(-50%)", children: /* @__PURE__ */ jsx(Spinner, { size: "sm" }) }),
-            isOpen && suggestions.length > 0 && /* @__PURE__ */ jsx(
-              List.Root,
-              {
-                position: "absolute",
-                zIndex: 10,
-                width: "100%",
-                bg: "bg.panel",
-                borderWidth: "1px",
-                borderRadius: "md",
-                shadow: "md",
-                maxH: "200px",
-                overflowY: "auto",
-                mt: 1,
-                children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
-                  List.Item,
-                  {
-                    px: 3,
-                    py: 2,
-                    cursor: "pointer",
-                    bg: highlightedIndex === index ? "bg.muted" : void 0,
-                    _hover: { bg: "bg.muted" },
-                    onClick: () => handleSelect(suggestion),
-                    onMouseEnter: () => setHighlightedIndex(index),
-                    children: /* @__PURE__ */ jsx(Text, { fontSize: "sm", children: suggestion.label })
-                  },
-                  suggestion.value + index
-                ))
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
-        ]
-      }
-    );
-  }
-});
-var defaultSwatches = [
-  "#000000",
-  "#4A5568",
-  "#F56565",
-  "#ED64A6",
-  "#9F7AEA",
-  "#6B46C1",
-  "#4299E1",
-  "#0BC5EA",
-  "#38B2AC",
-  "#48BB78",
-  "#ECC94B",
-  "#DD6B20"
-];
-var FieldColorPicker = createField({
-  displayName: "FieldColorPicker",
-  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps }) => {
-    const {
-      swatches = defaultSwatches,
-      size = "md",
-      showArea = true,
-      showEyeDropper = true,
-      showSliders = true,
-      showInput = true
-    } = componentProps;
-    const currentValue = field.state.value || "#000000";
-    let parsedColor;
-    try {
-      parsedColor = parseColor(currentValue);
-    } catch {
-      parsedColor = parseColor("#000000");
-    }
-    return /* @__PURE__ */ jsxs(
-      Field.Root,
-      {
-        invalid: hasError,
-        required: resolved.required,
-        disabled: resolved.disabled,
-        readOnly: resolved.readOnly,
-        children: [
-          /* @__PURE__ */ jsxs(
-            ColorPicker.Root,
-            {
-              value: parsedColor,
-              onValueChange: (details) => {
-                field.handleChange(details.valueAsString);
-              },
-              disabled: resolved.disabled,
-              readOnly: resolved.readOnly,
-              size,
-              children: [
-                /* @__PURE__ */ jsx(ColorPicker.HiddenInput, { name: fullPath }),
-                resolved.label && /* @__PURE__ */ jsxs(ColorPicker.Label, { 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(Field.RequiredIndicator, {})
-                ] }),
-                /* @__PURE__ */ jsxs(ColorPicker.Control, { children: [
-                  showInput && /* @__PURE__ */ jsx(ColorPicker.ChannelInput, { channel: "hex" }),
-                  /* @__PURE__ */ jsx(ColorPicker.Trigger, {})
-                ] }),
-                /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(ColorPicker.Positioner, { children: /* @__PURE__ */ jsxs(ColorPicker.Content, { children: [
-                  showArea && /* @__PURE__ */ jsx(ColorPicker.Area, {}),
-                  (showEyeDropper || showSliders) && /* @__PURE__ */ jsxs(HStack, { children: [
-                    showEyeDropper && /* @__PURE__ */ jsx(ColorPicker.EyeDropper, { size: "xs", variant: "outline" }),
-                    showSliders && /* @__PURE__ */ jsx(ColorPicker.Sliders, {})
-                  ] }),
-                  swatches.length > 0 && /* @__PURE__ */ jsx(ColorPicker.SwatchGroup, { children: swatches.map((swatch) => /* @__PURE__ */ jsx(ColorPicker.SwatchTrigger, { value: swatch, children: /* @__PURE__ */ jsx(ColorPicker.Swatch, { value: swatch, boxSize: "4.5" }) }, swatch)) })
-                ] }) }) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
-        ]
-      }
-    );
-  }
-});
-function FileImageList({ clearable }) {
-  const fileUpload = useFileUploadContext();
-  if (fileUpload.acceptedFiles.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(HStack, { wrap: "wrap", gap: "3", mt: "2", children: fileUpload.acceptedFiles.map((file) => /* @__PURE__ */ jsxs(FileUpload.Item, { file, p: "2", width: "auto", pos: "relative", children: [
-    clearable && /* @__PURE__ */ jsx(Float, { placement: "top-end", children: /* @__PURE__ */ jsx(FileUpload.ItemDeleteTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: "2xs", variant: "solid", colorPalette: "red", rounded: "full", children: /* @__PURE__ */ jsx(LuX, {}) }) }) }),
-    /* @__PURE__ */ jsx(FileUpload.ItemPreview, { type: "image/*", asChild: true, children: /* @__PURE__ */ jsx(FileUpload.ItemPreviewImage, { boxSize: "16", rounded: "md", objectFit: "cover" }) }),
-    /* @__PURE__ */ jsx(FileUpload.ItemPreview, { type: ".*", asChild: true, children: /* @__PURE__ */ jsx(Icon, { fontSize: "4xl", color: "fg.muted", children: /* @__PURE__ */ jsx(LuFile, {}) }) })
-  ] }, file.name)) });
-}
-function FileList({ showSize, clearable }) {
-  const fileUpload = useFileUploadContext();
-  if (fileUpload.acceptedFiles.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(FileUpload.ItemGroup, { mt: "2", children: fileUpload.acceptedFiles.map((file) => /* @__PURE__ */ jsxs(FileUpload.Item, { file, children: [
-    /* @__PURE__ */ jsx(FileUpload.ItemPreview, { asChild: true, children: /* @__PURE__ */ jsx(Icon, { fontSize: "lg", color: "fg.muted", children: /* @__PURE__ */ jsx(LuFile, {}) }) }),
-    showSize ? /* @__PURE__ */ jsxs(FileUpload.ItemContent, { children: [
-      /* @__PURE__ */ jsx(FileUpload.ItemName, {}),
-      /* @__PURE__ */ jsx(FileUpload.ItemSizeText, {})
-    ] }) : /* @__PURE__ */ jsx(FileUpload.ItemName, { flex: "1" }),
-    clearable && /* @__PURE__ */ jsx(FileUpload.ItemDeleteTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", color: "fg.muted", size: "xs", children: /* @__PURE__ */ jsx(LuX, {}) }) })
-  ] }, file.name)) });
-}
-var FieldFileUpload = createField({
-  displayName: "FieldFileUpload",
-  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps }) => {
-    const {
-      accept,
-      maxFileSize,
-      maxFiles = 1,
-      variant = "button",
-      showSize = false,
-      clearable = true,
-      dropzoneLabel = "Drag and drop files here",
-      dropzoneDescription,
-      buttonText = "Upload file"
-    } = componentProps;
-    const placeholder = resolved.placeholder ?? "Select file(s)";
-    const normalizedAccept = accept ? typeof accept === "string" ? accept.split(",").map((s) => s.trim()) : accept : void 0;
-    const isImageUpload = normalizedAccept?.some((type) => type.startsWith("image/") || type === "image/*");
-    return /* @__PURE__ */ jsxs(Field.Root, { invalid: hasError, required: resolved.required, disabled: resolved.disabled, children: [
-      /* @__PURE__ */ jsx(FieldLabel, { label: resolved.label, tooltip: resolved.tooltip, required: resolved.required }),
-      /* @__PURE__ */ jsxs(
-        FileUpload.Root,
-        {
-          maxFiles,
-          maxFileSize,
-          accept: normalizedAccept,
-          disabled: resolved.disabled,
-          onFileChange: (details) => {
-            field.handleChange(details.acceptedFiles);
-          },
-          "data-field-name": fullPath,
-          children: [
-            /* @__PURE__ */ jsx(FileUpload.HiddenInput, { onBlur: field.handleBlur }),
-            variant === "button" && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(FileUpload.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
-                /* @__PURE__ */ jsx(LuUpload, {}),
-                buttonText
-              ] }) }),
-              isImageUpload ? /* @__PURE__ */ jsx(FileImageList, { clearable }) : /* @__PURE__ */ jsx(FileList, { showSize, clearable })
-            ] }),
-            variant === "dropzone" && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs(FileUpload.Dropzone, { children: [
-                /* @__PURE__ */ jsx(Icon, { size: "md", color: "fg.muted", children: /* @__PURE__ */ jsx(LuUpload, {}) }),
-                /* @__PURE__ */ jsxs(FileUpload.DropzoneContent, { children: [
-                  /* @__PURE__ */ jsx(Box, { children: dropzoneLabel }),
-                  dropzoneDescription && /* @__PURE__ */ jsx(Text, { color: "fg.muted", children: dropzoneDescription })
-                ] })
-              ] }),
-              isImageUpload ? /* @__PURE__ */ jsx(FileImageList, { clearable }) : /* @__PURE__ */ jsx(FileList, { showSize, clearable })
-            ] }),
-            variant === "input" && /* @__PURE__ */ jsx(Input, { asChild: true, children: /* @__PURE__ */ jsx(FileUpload.Trigger, { children: /* @__PURE__ */ jsx(FileUpload.Context, { children: ({ acceptedFiles }) => {
-              if (acceptedFiles.length === 1) {
-                return /* @__PURE__ */ jsx("span", { children: acceptedFiles[0].name });
-              }
-              if (acceptedFiles.length > 1) {
-                return /* @__PURE__ */ jsxs("span", { children: [
-                  acceptedFiles.length,
-                  " files"
-                ] });
-              }
-              return /* @__PURE__ */ jsx(Text, { color: "fg.subtle", children: placeholder });
-            } }) }) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
-    ] });
-  }
-});
-var FieldOTPInput = createField({
-  displayName: "FieldOTPInput",
-  useFieldState: (props) => {
-    const [countdown, setCountdown] = useState(0);
-    const [isResending, setIsResending] = useState(false);
-    useEffect(() => {
-      if (countdown <= 0) {
-        return;
-      }
-      const timer = setInterval(() => {
-        setCountdown((prev) => prev - 1);
-      }, 1e3);
-      return () => clearInterval(timer);
-    }, [countdown]);
-    const handleResend = useCallback(async () => {
-      if (!props.onResend || countdown > 0) {
-        return;
-      }
-      setIsResending(true);
-      try {
-        await props.onResend();
-        setCountdown(props.resendTimeout ?? 60);
-      } finally {
-        setIsResending(false);
-      }
-    }, [props.onResend, countdown, props.resendTimeout]);
-    const formatCountdown = (seconds) => {
-      const mins = Math.floor(seconds / 60);
-      const secs = seconds % 60;
-      return `${mins}:${secs.toString().padStart(2, "0")}`;
-    };
-    const formContext = useDeclarativeForm();
-    return { countdown, isResending, handleResend, formatCountdown, formContext };
-  },
-  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps, fieldState }) => {
-    const { length = 6, autoSubmit = false, type = "numeric", mask = false, onResend } = componentProps;
-    const { countdown, isResending, handleResend, formatCountdown, formContext } = fieldState;
-    const value = field.state.value ?? "";
-    const handleValueComplete = (details) => {
-      field.handleChange(details.valueAsString);
-      if (autoSubmit && details.valueAsString.length === length) {
-        formContext.form.handleSubmit();
-      }
-    };
-    return /* @__PURE__ */ jsx(FieldWrapper, { resolved, hasError, errorMessage, fullPath, children: /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsxs(
-        PinInput.Root,
-        {
-          value: value.split(""),
-          onValueComplete: handleValueComplete,
-          onValueChange: (details) => field.handleChange(details.valueAsString),
-          count: length,
-          type,
-          mask,
-          otp: true,
-          children: [
-            /* @__PURE__ */ jsx(PinInput.Control, { children: /* @__PURE__ */ jsx(HStack, { gap: 2, children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx(PinInput.Input, { index, "data-field-name": index === 0 ? fullPath : void 0 }, index)) }) }),
-            /* @__PURE__ */ jsx(PinInput.HiddenInput, {})
-          ]
-        }
-      ),
-      onResend && /* @__PURE__ */ jsx(HStack, { mt: 3, justify: "center", children: countdown > 0 ? /* @__PURE__ */ jsxs(Text, { fontSize: "sm", color: "fg.muted", children: [
-        "Redo in ",
-        formatCountdown(countdown)
-      ] }) : /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleResend, disabled: isResending, loading: isResending, children: "Submit again" }) })
-    ] }) });
-  }
-});
-var PHONE_MASKS = {
-  RU: "+7 (999) 999-99-99",
-  US: "+1 (999) 999-9999",
-  UK: "+44 9999 999999",
-  DE: "+49 999 99999999",
-  FR: "+33 9 99 99 99 99",
-  IT: "+39 999 999 9999",
-  ES: "+34 999 99 99 99",
-  CN: "+86 999 9999 9999",
-  JP: "+81 99 9999 9999",
-  KR: "+82 99 9999 9999",
-  BY: "+375 (99) 999-99-99",
-  KZ: "+7 (999) 999-99-99",
-  UA: "+380 (99) 999-99-99"
-};
-var COUNTRY_FLAGS = {
-  RU: "\u{1F1F7}\u{1F1FA}",
-  US: "\u{1F1FA}\u{1F1F8}",
-  UK: "\u{1F1EC}\u{1F1E7}",
-  DE: "\u{1F1E9}\u{1F1EA}",
-  FR: "\u{1F1EB}\u{1F1F7}",
-  IT: "\u{1F1EE}\u{1F1F9}",
-  ES: "\u{1F1EA}\u{1F1F8}",
-  CN: "\u{1F1E8}\u{1F1F3}",
-  JP: "\u{1F1EF}\u{1F1F5}",
-  KR: "\u{1F1F0}\u{1F1F7}",
-  BY: "\u{1F1E7}\u{1F1FE}",
-  KZ: "\u{1F1F0}\u{1F1FF}",
-  UA: "\u{1F1FA}\u{1F1E6}"
-};
-var FieldPhone = createField({
-  displayName: "FieldPhone",
-  useFieldState: (props) => {
-    const { country = "RU", autoUnmask = false } = props;
-    const mask = PHONE_MASKS[country];
-    const maskRef = useCallback(
-      (element) => {
-        if (element && mask) {
-          const maskCallback = withMask(mask, {
-            showMaskOnFocus: true,
-            clearIncomplete: true,
-            autoUnmask
-          });
-          maskCallback(element);
-        }
-      },
-      [mask, autoUnmask]
-    );
-    return { maskRef };
-  },
-  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps, fieldState }) => {
-    const { country = "RU", showFlag = false } = componentProps;
-    const flag = COUNTRY_FLAGS[country];
-    const mask = PHONE_MASKS[country];
-    const value = field.state.value ?? "";
-    const resolvedPlaceholder = resolved.placeholder ?? mask?.toString().replace(/9/g, "_");
-    return /* @__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(Group, { attached: true, children: [
-            showFlag && /* @__PURE__ */ jsx(Text, { px: 3, display: "flex", alignItems: "center", bg: "bg.muted", borderWidth: "1px", borderRightWidth: "0", children: flag }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                ref: fieldState.maskRef,
-                value,
-                onChange: (e) => field.handleChange(e.target.value),
-                onBlur: field.handleBlur,
-                placeholder: resolvedPlaceholder,
-                "data-field-name": fullPath,
-                type: "tel",
-                inputMode: "tel",
-                autoComplete: "tel"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
-        ]
-      }
-    );
-  }
-});
-var FieldPinInput = createField({
-  displayName: "FieldPinInput",
-  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps }) => {
-    const {
-      count = 4,
-      mask,
-      otp,
-      type = "numeric",
-      size = "md",
-      variant = "outline",
-      attached,
-      onComplete
-    } = componentProps;
-    const stringValue = field.state.value ?? "";
-    const arrayValue = stringValue.split("").slice(0, count);
-    while (arrayValue.length < count) {
-      arrayValue.push("");
-    }
-    const handleValueChange = (details) => {
-      const newValue = details.value.join("");
-      field.handleChange(newValue);
-    };
-    const handleValueComplete = (details) => {
-      const completeValue = details.value.join("");
-      onComplete?.(completeValue);
-    };
-    return /* @__PURE__ */ jsx(FieldWrapper, { resolved, hasError, errorMessage, fullPath, children: /* @__PURE__ */ jsxs(
-      PinInput.Root,
-      {
-        value: arrayValue,
-        onValueChange: handleValueChange,
-        onValueComplete: handleValueComplete,
-        placeholder: resolved.placeholder,
-        mask,
-        otp,
-        type,
-        size,
-        variant,
-        attached,
-        disabled: resolved.disabled,
-        readOnly: resolved.readOnly,
-        invalid: hasError,
-        count,
-        onBlur: field.handleBlur,
-        "data-field-name": fullPath,
-        children: [
-          /* @__PURE__ */ jsx(PinInput.HiddenInput, {}),
-          /* @__PURE__ */ jsx(PinInput.Control, { children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(PinInput.Input, { index }, index)) })
-        ]
-      }
-    ) });
-  }
-});
-function useCityProvider(propProvider, token) {
-  const formContext = useDeclarativeFormOptional();
-  if (propProvider) return propProvider;
-  if (formContext?.addressProvider) return formContext.addressProvider;
-  if (token) return createDaDataProvider({ token });
-  const envKey = typeof window !== "undefined" ? process.env.NEXT_PUBLIC_DADATA_API_KEY : "";
-  if (envKey) return createDaDataProvider({ token: envKey });
-  return null;
-}
-var FieldCity = createField({
-  displayName: "FieldCity",
-  useFieldState: (props) => {
-    const { provider: propProvider, token, minChars = 2, debounceMs = 300 } = props;
-    const provider = useCityProvider(propProvider, token);
-    const [inputValue, setInputValue] = useState("");
-    const [suggestions, setSuggestions] = useState([]);
-    const [isLoading, setIsLoading] = useState(false);
-    const [isOpen, setIsOpen] = useState(false);
-    const [highlightedIndex, setHighlightedIndex] = useState(-1);
-    const containerRef = useRef(null);
-    const debouncedQuery = useDebounce(inputValue, debounceMs);
-    const justSelectedRef = useRef(false);
-    const initializedRef = useRef(false);
-    const fetchSuggestions = useCallback(
-      async (query) => {
-        if (query.length < minChars || !provider) {
-          setSuggestions([]);
-          return;
-        }
-        setIsLoading(true);
-        try {
-          const results = await provider.getSuggestions(query, {
-            count: 7,
-            bounds: { from: "city", to: "settlement" }
-          });
-          setSuggestions(results);
-          setIsOpen(results.length > 0);
-        } catch (error) {
-          console.error("Error loading city suggestions:", error);
-          setSuggestions([]);
-        } finally {
-          setIsLoading(false);
-        }
-      },
-      [provider, minChars]
-    );
-    useEffect(() => {
-      if (justSelectedRef.current) {
-        justSelectedRef.current = false;
-        return;
-      }
-      if (debouncedQuery) {
-        fetchSuggestions(debouncedQuery);
-      } else {
-        setSuggestions([]);
-        setIsOpen(false);
-      }
-    }, [debouncedQuery, fetchSuggestions]);
-    useEffect(() => {
-      const handleClickOutside = (event) => {
-        if (containerRef.current && !containerRef.current.contains(event.target)) {
-          setIsOpen(false);
-        }
-      };
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, []);
-    return {
-      inputValue,
-      setInputValue,
-      suggestions,
-      setSuggestions,
-      isLoading,
-      setIsLoading,
-      isOpen,
-      setIsOpen,
-      highlightedIndex,
-      setHighlightedIndex,
-      containerRef,
-      debouncedQuery,
-      justSelectedRef,
-      initializedRef
-    };
-  },
-  render: ({ field, fullPath, resolved, hasError, errorMessage, fieldState }) => {
-    const {
-      inputValue,
-      setInputValue,
-      suggestions,
-      setSuggestions,
-      isLoading,
-      isOpen,
-      setIsOpen,
-      highlightedIndex,
-      setHighlightedIndex,
-      containerRef
-    } = fieldState;
-    const { justSelectedRef, initializedRef } = fieldState;
-    const fieldValue = field.state.value;
-    if (!initializedRef.current && fieldValue && fieldValue !== inputValue) {
-      initializedRef.current = true;
-      setInputValue(fieldValue);
-    }
-    const handleSelect = (suggestion) => {
-      const cityName = suggestion.data?.city || suggestion.data?.settlement || suggestion.value;
-      justSelectedRef.current = true;
-      setInputValue(cityName);
-      setIsOpen(false);
-      setSuggestions([]);
-      field.handleChange(cityName);
-    };
-    const handleKeyDown = (e) => {
-      if (!isOpen || suggestions.length === 0) {
-        return;
-      }
-      switch (e.key) {
-        case "ArrowDown":
-          e.preventDefault();
-          setHighlightedIndex(highlightedIndex < suggestions.length - 1 ? highlightedIndex + 1 : 0);
-          break;
-        case "ArrowUp":
-          e.preventDefault();
-          setHighlightedIndex(highlightedIndex > 0 ? highlightedIndex - 1 : suggestions.length - 1);
-          break;
-        case "Enter":
-          e.preventDefault();
-          if (highlightedIndex >= 0) {
-            handleSelect(suggestions[highlightedIndex]);
-          }
-          break;
-        case "Escape":
-          setIsOpen(false);
-          break;
-      }
-    };
-    return /* @__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(Box, { ref: containerRef, position: "relative", width: "100%", children: [
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                value: inputValue,
-                onChange: (e) => {
-                  setInputValue(e.target.value);
-                  setHighlightedIndex(-1);
-                  if (!e.target.value) {
-                    field.handleChange("");
-                  }
-                },
-                onFocus: () => {
-                  if (suggestions.length > 0) {
-                    setIsOpen(true);
-                  }
-                },
-                onBlur: () => {
-                  if (inputValue && inputValue !== field.state.value) {
-                    field.handleChange(inputValue);
-                  }
-                  field.handleBlur();
-                },
-                onKeyDown: handleKeyDown,
-                placeholder: resolved.placeholder ?? "Enter city",
-                "data-field-name": fullPath
-              }
-            ),
-            isLoading && /* @__PURE__ */ jsx(Box, { position: "absolute", right: 3, top: "50%", transform: "translateY(-50%)", children: /* @__PURE__ */ jsx(Spinner, { size: "sm" }) }),
-            isOpen && suggestions.length > 0 && /* @__PURE__ */ jsx(
-              List.Root,
-              {
-                position: "absolute",
-                zIndex: 10,
-                width: "100%",
-                bg: "bg.panel",
-                borderWidth: "1px",
-                borderRadius: "md",
-                shadow: "md",
-                maxH: "250px",
-                overflowY: "auto",
-                mt: 1,
-                listStyle: "none",
-                children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
-                  List.Item,
-                  {
-                    px: 3,
-                    py: 2,
-                    cursor: "pointer",
-                    bg: highlightedIndex === index ? "bg.muted" : void 0,
-                    _hover: { bg: "bg.muted" },
-                    onClick: () => handleSelect(suggestion),
-                    onMouseEnter: () => setHighlightedIndex(index),
-                    children: /* @__PURE__ */ jsx(Text, { fontSize: "sm", children: suggestion.label })
-                  },
-                  `${suggestion.value}-${index}`
-                ))
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
-        ]
-      }
-    );
-  }
-});
-
-export { FieldAddress, FieldCity, FieldColorPicker, FieldFileUpload, FieldOTPInput, FieldPhone, FieldPinInput };
-//# sourceMappingURL=chunk-GOELIS6T.js.map
-//# sourceMappingURL=chunk-GOELIS6T.js.map