@letar/forms 1.0.3 → 1.1.0

package/chunk-GOELIS6T.js

@@ -0,0 +1,849 @@
+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