@letar/forms 1.0.3 → 1.2.0

package/chunk-DQUVUMCX.js

@@ -0,0 +1,982 @@
+import { createField, FieldLabel, FieldError, FieldWrapper, useResolvedFieldProps, getFieldErrors } from './chunk-XFWLD5EO.js';
+import { Field, Editable, IconButton, InputGroup, Input, VStack, HStack, Box, Text, Progress, List, Textarea, Popover, Portal, Button, Center, Icon, Image, Spinner } from '@chakra-ui/react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import { LuEyeOff, LuEye, LuCheck, LuX, LuImage, LuRedo, LuUndo, LuLink, LuQuote, LuListOrdered, LuList, LuHeading3, LuHeading2, LuHeading1, LuCode, LuStrikethrough, LuUnderline, LuItalic, LuBold, LuUnlink, LuUpload } from 'react-icons/lu';
+import TiptapImage from '@tiptap/extension-image';
+import { Link } from '@tiptap/extension-link';
+import Placeholder from '@tiptap/extension-placeholder';
+import Underline from '@tiptap/extension-underline';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { withMask } from 'use-mask-input';
+
+var FieldEditable = createField({
+  displayName: "FieldEditable",
+  render: ({ field, resolved, hasError, errorMessage, componentProps }) => {
+    const {
+      multiline = false,
+      activationMode = "click",
+      showControls = false,
+      editIcon,
+      cancelIcon,
+      submitIcon,
+      submitOnBlur = true
+    } = componentProps;
+    const currentValue = field.state.value || "";
+    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(
+            Editable.Root,
+            {
+              value: currentValue,
+              onValueChange: (details) => field.handleChange(details.value),
+              disabled: resolved.disabled,
+              readOnly: resolved.readOnly,
+              placeholder: resolved.placeholder ?? "Click to edit",
+              activationMode,
+              submitMode: submitOnBlur ? "blur" : "enter",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Editable.Preview,
+                  {
+                    minH: multiline ? "48px" : void 0,
+                    alignItems: multiline ? "flex-start" : void 0,
+                    width: "full"
+                  }
+                ),
+                multiline ? /* @__PURE__ */ jsx(Editable.Textarea, {}) : /* @__PURE__ */ jsx(Editable.Input, {}),
+                showControls && /* @__PURE__ */ jsxs(Editable.Control, { children: [
+                  /* @__PURE__ */ jsx(Editable.EditTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "xs", children: editIcon ?? "\u270F\uFE0F" }) }),
+                  /* @__PURE__ */ jsx(Editable.CancelTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "outline", size: "xs", children: cancelIcon ?? "\u2715" }) }),
+                  /* @__PURE__ */ jsx(Editable.SubmitTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "outline", size: "xs", children: submitIcon ?? "\u2713" }) })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
+        ]
+      }
+    );
+  }
+});
+var FieldPassword = createField({
+  displayName: "FieldPassword",
+  useFieldState: (props) => {
+    const [visible, setVisible] = useState(props.defaultVisible ?? false);
+    return {
+      visible,
+      toggle: () => setVisible((v) => !v)
+    };
+  },
+  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps, fieldState }) => /* @__PURE__ */ jsx(FieldWrapper, { resolved, hasError, errorMessage, fullPath, children: /* @__PURE__ */ jsx(
+    InputGroup,
+    {
+      endElement: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          tabIndex: -1,
+          me: "-2",
+          aspectRatio: "square",
+          size: "sm",
+          variant: "ghost",
+          height: "calc(100% - {spacing.2})",
+          "aria-label": "Toggle password visibility",
+          disabled: resolved.disabled,
+          onPointerDown: (e) => {
+            if (resolved.disabled) {
+              return;
+            }
+            if (e.button !== 0) {
+              return;
+            }
+            e.preventDefault();
+            fieldState.toggle();
+          },
+          children: fieldState.visible ? /* @__PURE__ */ jsx(LuEyeOff, {}) : /* @__PURE__ */ jsx(LuEye, {})
+        }
+      ),
+      children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: fieldState.visible ? "text" : "password",
+          value: field.state.value ?? "",
+          onChange: (e) => field.handleChange(e.target.value),
+          onBlur: field.handleBlur,
+          placeholder: resolved.placeholder,
+          maxLength: componentProps.maxLength,
+          autoComplete: componentProps.autoComplete ?? resolved.autocomplete,
+          "data-field-name": fullPath
+        }
+      )
+    }
+  ) })
+});
+var DEFAULT_REQUIREMENTS = ["minLength:8", "uppercase", "lowercase", "number", "special"];
+var REQUIREMENT_LABELS = {
+  "minLength:8": "Minimum 8 characters",
+  uppercase: "At least one uppercase letter",
+  lowercase: "At least one lowercase letter",
+  number: "At least one digit",
+  special: "At least one special character (!@#$%^&*)"
+};
+function checkRequirement(password, requirement) {
+  switch (requirement) {
+    case "minLength:8":
+      return password.length >= 8;
+    case "uppercase":
+      return /[A-Z]/.test(password);
+    case "lowercase":
+      return /[a-z]/.test(password);
+    case "number":
+      return /[0-9]/.test(password);
+    case "special":
+      return /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(password);
+    default:
+      return false;
+  }
+}
+function calculateStrength(password, requirements) {
+  if (!password) {
+    return 0;
+  }
+  const metCount = requirements.filter((req) => checkRequirement(password, req)).length;
+  return Math.round(metCount / requirements.length * 100);
+}
+function getStrengthInfo(strength) {
+  if (strength < 25) {
+    return { label: "Weak", colorPalette: "red" };
+  }
+  if (strength < 50) {
+    return { label: "Medium", colorPalette: "orange" };
+  }
+  if (strength < 75) {
+    return { label: "Good", colorPalette: "yellow" };
+  }
+  return { label: "Strong", colorPalette: "green" };
+}
+var FieldPasswordStrength = createField({
+  displayName: "FieldPasswordStrength",
+  useFieldState: (props) => {
+    const [visible, setVisible] = useState(props.defaultVisible ?? false);
+    return { visible, toggle: () => setVisible((v) => !v) };
+  },
+  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps, fieldState }) => {
+    const { requirements = DEFAULT_REQUIREMENTS, showRequirements = true } = componentProps;
+    const { visible, toggle } = fieldState;
+    const value = field.state.value ?? "";
+    const strength = calculateStrength(value, requirements);
+    const { label: strengthLabel, colorPalette } = getStrengthInfo(strength);
+    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(VStack, { gap: 2, align: "stretch", width: "100%", children: [
+            /* @__PURE__ */ jsxs(HStack, { children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: visible ? "text" : "password",
+                  value,
+                  onChange: (e) => field.handleChange(e.target.value),
+                  onBlur: field.handleBlur,
+                  placeholder: resolved.placeholder ?? "Enter password",
+                  "data-field-name": fullPath,
+                  flex: 1
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  "aria-label": visible ? "Hide password" : "Show password",
+                  onClick: toggle,
+                  variant: "ghost",
+                  size: "sm",
+                  children: visible ? /* @__PURE__ */ jsx(LuEyeOff, {}) : /* @__PURE__ */ jsx(LuEye, {})
+                }
+              )
+            ] }),
+            value && /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsxs(HStack, { justify: "space-between", mb: 1, children: [
+                /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "fg.muted", children: "Strength" }),
+                /* @__PURE__ */ jsx(Text, { fontSize: "xs", fontWeight: "medium", color: `${colorPalette}.600`, children: strengthLabel })
+              ] }),
+              /* @__PURE__ */ jsx(Progress.Root, { value: strength, colorPalette, size: "xs", children: /* @__PURE__ */ jsx(Progress.Track, { children: /* @__PURE__ */ jsx(Progress.Range, {}) }) })
+            ] }),
+            showRequirements && value && /* @__PURE__ */ jsx(List.Root, { fontSize: "sm", gap: 1, children: requirements.map((req) => {
+              const met = checkRequirement(value, req);
+              return /* @__PURE__ */ jsxs(List.Item, { display: "flex", alignItems: "center", gap: 2, children: [
+                /* @__PURE__ */ jsx(Box, { color: met ? "green.500" : "gray.400", children: met ? /* @__PURE__ */ jsx(LuCheck, { size: 14 }) : /* @__PURE__ */ jsx(LuX, { size: 14 }) }),
+                /* @__PURE__ */ jsx(Text, { color: met ? "fg.default" : "fg.muted", children: REQUIREMENT_LABELS[req] })
+              ] }, req);
+            }) })
+          ] }),
+          /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolved.helperText })
+        ]
+      }
+    );
+  }
+});
+var DEFAULT_TOOLBAR_BUTTONS = [
+  "bold",
+  "italic",
+  "underline",
+  "strike",
+  "code",
+  "heading1",
+  "heading2",
+  "heading3",
+  "bulletList",
+  "orderedList",
+  "blockquote",
+  "link",
+  "undo",
+  "redo"
+];
+var TOOLBAR_CONFIG = {
+  bold: {
+    icon: /* @__PURE__ */ jsx(LuBold, {}),
+    label: "Bold",
+    action: (editor) => editor?.chain().focus().toggleBold().run(),
+    isActive: (editor) => editor?.isActive("bold") ?? false
+  },
+  italic: {
+    icon: /* @__PURE__ */ jsx(LuItalic, {}),
+    label: "Italic",
+    action: (editor) => editor?.chain().focus().toggleItalic().run(),
+    isActive: (editor) => editor?.isActive("italic") ?? false
+  },
+  underline: {
+    icon: /* @__PURE__ */ jsx(LuUnderline, {}),
+    label: "\u041F\u043E\u0434\u0447\u0451\u0440\u043A\u043D\u0443\u0442\u044B\u0439",
+    action: (editor) => editor?.chain().focus().toggleUnderline().run(),
+    isActive: (editor) => editor?.isActive("underline") ?? false
+  },
+  strike: {
+    icon: /* @__PURE__ */ jsx(LuStrikethrough, {}),
+    label: "Strikethrough",
+    action: (editor) => editor?.chain().focus().toggleStrike().run(),
+    isActive: (editor) => editor?.isActive("strike") ?? false
+  },
+  code: {
+    icon: /* @__PURE__ */ jsx(LuCode, {}),
+    label: "\u041A\u043E\u0434",
+    action: (editor) => editor?.chain().focus().toggleCode().run(),
+    isActive: (editor) => editor?.isActive("code") ?? false
+  },
+  heading1: {
+    icon: /* @__PURE__ */ jsx(LuHeading1, {}),
+    label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 1",
+    action: (editor) => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
+    isActive: (editor) => editor?.isActive("heading", { level: 1 }) ?? false
+  },
+  heading2: {
+    icon: /* @__PURE__ */ jsx(LuHeading2, {}),
+    label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 2",
+    action: (editor) => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
+    isActive: (editor) => editor?.isActive("heading", { level: 2 }) ?? false
+  },
+  heading3: {
+    icon: /* @__PURE__ */ jsx(LuHeading3, {}),
+    label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 3",
+    action: (editor) => editor?.chain().focus().toggleHeading({ level: 3 }).run(),
+    isActive: (editor) => editor?.isActive("heading", { level: 3 }) ?? false
+  },
+  bulletList: {
+    icon: /* @__PURE__ */ jsx(LuList, {}),
+    label: "Bullet list",
+    action: (editor) => editor?.chain().focus().toggleBulletList().run(),
+    isActive: (editor) => editor?.isActive("bulletList") ?? false
+  },
+  orderedList: {
+    icon: /* @__PURE__ */ jsx(LuListOrdered, {}),
+    label: "Ordered list",
+    action: (editor) => editor?.chain().focus().toggleOrderedList().run(),
+    isActive: (editor) => editor?.isActive("orderedList") ?? false
+  },
+  blockquote: {
+    icon: /* @__PURE__ */ jsx(LuQuote, {}),
+    label: "Quote",
+    action: (editor) => editor?.chain().focus().toggleBlockquote().run(),
+    isActive: (editor) => editor?.isActive("blockquote") ?? false
+  },
+  link: {
+    icon: /* @__PURE__ */ jsx(LuLink, {}),
+    label: "\u0421\u0441\u044B\u043B\u043A\u0430",
+    action: (editor) => {
+      if (editor?.isActive("link")) {
+        editor.chain().focus().unsetLink().run();
+      } else {
+        const url = window.prompt("URL");
+        if (url) {
+          editor?.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+        }
+      }
+    },
+    isActive: (editor) => editor?.isActive("link") ?? false
+  },
+  undo: {
+    icon: /* @__PURE__ */ jsx(LuUndo, {}),
+    label: "Undo",
+    action: (editor) => editor?.chain().focus().undo().run()
+  },
+  redo: {
+    icon: /* @__PURE__ */ jsx(LuRedo, {}),
+    label: "Redo",
+    action: (editor) => editor?.chain().focus().redo().run()
+  },
+  // Кнопка image processesся отдельно через ImagePopover (аналогично link)
+  image: {
+    icon: /* @__PURE__ */ jsx(LuImage, {}),
+    label: "Insert image",
+    action: () => {
+    }
+  }
+};
+function ImagePopover({ editor, config, disabled }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [uploadState, setUploadState] = useState("idle");
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [previewUrl, setPreviewUrl] = useState(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef(null);
+  const maxSize = config.maxSize ?? 10 * 1024 * 1024;
+  const acceptTypes = config.acceptTypes ?? ["image/*"];
+  const handleUpload = useCallback(
+    async (file) => {
+      if (!file.type.startsWith("image/")) {
+        setErrorMessage("File must be an image");
+        setUploadState("error");
+        return;
+      }
+      if (file.size > maxSize) {
+        const maxSizeMB = (maxSize / 1024 / 1024).toFixed(0);
+        setErrorMessage(`Size file\u0430 \u043D\u0435 must \u043F\u0440\u0435\u0432\u044B\u0448\u0430\u0442\u044C ${maxSizeMB}MB`);
+        setUploadState("error");
+        return;
+      }
+      const preview = URL.createObjectURL(file);
+      setPreviewUrl(preview);
+      setUploadState("uploading");
+      setErrorMessage(null);
+      try {
+        const formData = new FormData();
+        formData.append("file", file);
+        if (config.category) {
+          formData.append("category", config.category);
+        }
+        const response = await fetch(config.endpoint, {
+          method: "POST",
+          body: formData
+        });
+        const result = await response.json();
+        if (!response.ok) {
+          throw new Error(result.error || "Upload error");
+        }
+        if (result.url) {
+          ;
+          editor.chain().focus().setImage({ src: result.url }).run();
+          handleClose();
+        } else {
+          throw new Error("Image URL not received");
+        }
+      } catch (err) {
+        setErrorMessage(err instanceof Error ? err.message : "Upload error");
+        setUploadState("error");
+      } finally {
+        if (preview) {
+          URL.revokeObjectURL(preview);
+        }
+      }
+    },
+    [editor, config, maxSize]
+  );
+  const handleFileSelect = useCallback(
+    (e) => {
+      const file = e.target.files?.[0];
+      if (file) {
+        handleUpload(file);
+      }
+      e.target.value = "";
+    },
+    [handleUpload]
+  );
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      setIsDragging(false);
+      const file = e.dataTransfer.files[0];
+      if (file) {
+        handleUpload(file);
+      }
+    },
+    [handleUpload]
+  );
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    setUploadState("idle");
+    setErrorMessage(null);
+    setPreviewUrl(null);
+    setIsDragging(false);
+  }, []);
+  const handleRetry = useCallback(() => {
+    setUploadState("idle");
+    setErrorMessage(null);
+    setPreviewUrl(null);
+  }, []);
+  return /* @__PURE__ */ jsxs(Popover.Root, { open: isOpen, onOpenChange: (details) => setIsOpen(details.open), children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        "aria-label": "Insert image",
+        size: "sm",
+        variant: "ghost",
+        onClick: () => setIsOpen(true),
+        disabled,
+        children: /* @__PURE__ */ jsx(LuImage, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsxs(Popover.Content, { width: "320px", children: [
+      /* @__PURE__ */ jsx(Popover.Arrow, { children: /* @__PURE__ */ jsx(Popover.ArrowTip, {}) }),
+      /* @__PURE__ */ jsxs(Popover.Body, { p: 3, children: [
+        uploadState === "idle" && /* @__PURE__ */ jsxs(VStack, { gap: 3, align: "stretch", children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              p: 6,
+              borderWidth: "2px",
+              borderStyle: "dashed",
+              borderColor: isDragging ? "colorPalette.500" : "border",
+              borderRadius: "md",
+              bg: isDragging ? "colorPalette.50" : "bg.subtle",
+              transition: "all 0.2s",
+              cursor: "pointer",
+              _hover: { borderColor: "colorPalette.400" },
+              onDragOver: (e) => {
+                e.preventDefault();
+                setIsDragging(true);
+              },
+              onDragLeave: (e) => {
+                e.preventDefault();
+                setIsDragging(false);
+              },
+              onDrop: handleDrop,
+              onClick: () => fileInputRef.current?.click(),
+              children: /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsxs(VStack, { gap: 2, children: [
+                /* @__PURE__ */ jsx(Icon, { fontSize: "2xl", color: "fg.muted", children: /* @__PURE__ */ jsx(LuUpload, {}) }),
+                /* @__PURE__ */ jsx(Text, { fontSize: "sm", fontWeight: "medium", textAlign: "center", children: "Drag image here" }),
+                /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "fg.muted", children: "or click to select" })
+              ] }) })
+            }
+          ),
+          /* @__PURE__ */ jsxs(Text, { fontSize: "xs", color: "fg.muted", textAlign: "center", children: [
+            "PNG, JPG, WEBP up to ",
+            (maxSize / 1024 / 1024).toFixed(0),
+            "MB"
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept: acceptTypes.join(","),
+              onChange: handleFileSelect,
+              style: { display: "none" }
+            }
+          ),
+          /* @__PURE__ */ jsx(HStack, { justify: "flex-end", children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: handleClose, children: "Cancel" }) })
+        ] }),
+        uploadState === "uploading" && /* @__PURE__ */ jsxs(VStack, { gap: 3, align: "stretch", children: [
+          previewUrl && /* @__PURE__ */ jsx(Box, { borderRadius: "md", overflow: "hidden", bg: "bg.subtle", children: /* @__PURE__ */ jsx(Image, { src: previewUrl, alt: "Preview", maxH: "150px", w: "100%", objectFit: "contain" }) }),
+          /* @__PURE__ */ jsx(Center, { py: 2, children: /* @__PURE__ */ jsxs(HStack, { gap: 2, children: [
+            /* @__PURE__ */ jsx(Spinner, { size: "sm", color: "colorPalette.500" }),
+            /* @__PURE__ */ jsx(Text, { fontSize: "sm", color: "fg.muted", children: "Loading..." })
+          ] }) })
+        ] }),
+        uploadState === "error" && /* @__PURE__ */ jsxs(VStack, { gap: 3, align: "stretch", children: [
+          previewUrl && /* @__PURE__ */ jsxs(Box, { borderRadius: "md", overflow: "hidden", bg: "bg.subtle", position: "relative", children: [
+            /* @__PURE__ */ jsx(Image, { src: previewUrl, alt: "Preview", maxH: "150px", w: "100%", objectFit: "contain", opacity: 0.5 }),
+            /* @__PURE__ */ jsx(Center, { position: "absolute", inset: 0, bg: "blackAlpha.500", borderRadius: "md", children: /* @__PURE__ */ jsx(Icon, { color: "red.400", fontSize: "2xl", children: /* @__PURE__ */ jsx(LuX, {}) }) })
+          ] }),
+          /* @__PURE__ */ jsx(Text, { fontSize: "sm", color: "red.400", textAlign: "center", children: errorMessage }),
+          /* @__PURE__ */ jsxs(HStack, { justify: "center", gap: 2, children: [
+            /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: handleClose, children: "Cancel" }),
+            /* @__PURE__ */ jsx(Button, { size: "sm", colorPalette: "brand", onClick: handleRetry, children: "Try again" })
+          ] })
+        ] })
+      ] })
+    ] }) }) })
+  ] });
+}
+function LinkPopover({ editor, disabled }) {
+  const [url, setUrl] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const isActive = editor.isActive("link");
+  const handleOpen = useCallback(() => {
+    if (isActive) {
+      editor.chain().focus().unsetLink().run();
+    } else {
+      const currentUrl = editor.getAttributes("link").href ?? "";
+      setUrl(currentUrl);
+      setIsOpen(true);
+    }
+  }, [editor, isActive]);
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    setUrl("");
+  }, []);
+  const handleSubmit = useCallback(() => {
+    if (url) {
+      editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+    }
+    handleClose();
+  }, [editor, url, handleClose]);
+  const handleRemove = useCallback(() => {
+    editor.chain().focus().unsetLink().run();
+    handleClose();
+  }, [editor, handleClose]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleSubmit();
+      } else if (e.key === "Escape") {
+        handleClose();
+      }
+    },
+    [handleSubmit, handleClose]
+  );
+  return /* @__PURE__ */ jsxs(Popover.Root, { open: isOpen, onOpenChange: (details) => setIsOpen(details.open), children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        "aria-label": isActive ? "Remove \u0441\u0441\u044B\u043B\u043A\u0443" : "Add \u0441\u0441\u044B\u043B\u043A\u0443",
+        size: "sm",
+        variant: isActive ? "solid" : "ghost",
+        colorPalette: isActive ? "brand" : void 0,
+        onClick: handleOpen,
+        disabled,
+        children: isActive ? /* @__PURE__ */ jsx(LuUnlink, {}) : /* @__PURE__ */ jsx(LuLink, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsxs(Popover.Content, { width: "300px", children: [
+      /* @__PURE__ */ jsx(Popover.Arrow, { children: /* @__PURE__ */ jsx(Popover.ArrowTip, {}) }),
+      /* @__PURE__ */ jsx(Popover.Body, { p: 3, children: /* @__PURE__ */ jsxs(VStack, { gap: 3, align: "stretch", children: [
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: "https://example.com",
+            value: url,
+            onChange: (e) => setUrl(e.target.value),
+            onKeyDown: handleKeyDown,
+            size: "sm",
+            autoFocus: true
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(HStack, { gap: 2, justify: "flex-end", children: [
+          editor.isActive("link") && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", colorPalette: "red", onClick: handleRemove, children: "Remove" }),
+          /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: handleClose, children: "Cancel" }),
+          /* @__PURE__ */ jsx(Button, { size: "sm", colorPalette: "brand", onClick: handleSubmit, disabled: !url.trim(), children: "Apply" })
+        ] })
+      ] }) })
+    ] }) }) })
+  ] });
+}
+function safeParseJSON(value) {
+  try {
+    return JSON.parse(value);
+  } catch {
+    console.warn("RichText: Invalid JSON content, using empty document");
+    return "";
+  }
+}
+function FieldRichText({
+  name,
+  label,
+  placeholder,
+  helperText,
+  required,
+  disabled,
+  readOnly,
+  tooltip,
+  minHeight = "150px",
+  maxHeight,
+  showToolbar = true,
+  toolbarButtons = DEFAULT_TOOLBAR_BUTTONS,
+  outputFormat = "html",
+  imageUpload
+}) {
+  const {
+    form,
+    fullPath,
+    label: resolvedLabel,
+    placeholder: resolvedPlaceholder,
+    helperText: resolvedHelperText,
+    tooltip: resolvedTooltip,
+    required: resolvedRequired,
+    disabled: resolvedDisabled,
+    readOnly: resolvedReadOnly
+  } = useResolvedFieldProps(name, { label, placeholder, helperText, required, disabled, readOnly, tooltip });
+  return /* @__PURE__ */ jsx(form.Field, { name: fullPath, children: (field) => {
+    const { hasError, errorMessage } = getFieldErrors(field);
+    return /* @__PURE__ */ jsxs(
+      Field.Root,
+      {
+        invalid: hasError,
+        required: resolvedRequired,
+        disabled: resolvedDisabled,
+        readOnly: resolvedReadOnly,
+        children: [
+          /* @__PURE__ */ jsx(FieldLabel, { label: resolvedLabel, tooltip: resolvedTooltip, required: resolvedRequired }),
+          /* @__PURE__ */ jsx(
+            RichTextEditor,
+            {
+              value: field.state.value,
+              onChange: (value) => field.handleChange(value),
+              onBlur: field.handleBlur,
+              placeholder: resolvedPlaceholder,
+              minHeight,
+              maxHeight,
+              showToolbar,
+              toolbarButtons,
+              outputFormat,
+              disabled,
+              readOnly,
+              hasError,
+              fieldName: fullPath,
+              imageUpload
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldError, { hasError, errorMessage, helperText: resolvedHelperText })
+        ]
+      }
+    );
+  } });
+}
+function RichTextEditor({
+  value,
+  onChange,
+  onBlur,
+  placeholder,
+  minHeight,
+  maxHeight,
+  showToolbar,
+  toolbarButtons,
+  outputFormat,
+  disabled,
+  readOnly,
+  hasError,
+  fieldName,
+  imageUpload
+}) {
+  const extensions = useMemo(() => {
+    const baseExtensions = [
+      StarterKit,
+      Underline,
+      Link.configure({
+        openOnClick: false,
+        HTMLAttributes: {
+          rel: "noopener noreferrer",
+          target: "_blank"
+        }
+      }),
+      Placeholder.configure({
+        placeholder: placeholder ?? "Start typing..."
+      }),
+      // Add Image extension only if imageUpload is configured
+      ...imageUpload ? [
+        TiptapImage.configure({
+          inline: false,
+          allowBase64: false,
+          HTMLAttributes: {
+            class: "richtext-image"
+          }
+        })
+      ] : []
+    ];
+    return baseExtensions;
+  }, [placeholder, imageUpload]);
+  const editor = useEditor({
+    // Cast needed: minor @tiptap/core version drift (e.g. 3.20.0 vs 3.20.1) causes nominal type mismatch
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- @tiptap/core version incompatibility
+    extensions,
+    content: outputFormat === "json" && value ? safeParseJSON(value) : value || "",
+    editable: !disabled && !readOnly,
+    onUpdate: ({ editor: editor2 }) => {
+      if (outputFormat === "json") {
+        onChange(JSON.stringify(editor2.getJSON()));
+      } else {
+        onChange(editor2.getHTML());
+      }
+    },
+    onBlur: () => {
+      onBlur();
+    },
+    immediatelyRender: false
+  });
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    const currentContent = outputFormat === "json" ? JSON.stringify(editor.getJSON()) : editor.getHTML();
+    if (value !== currentContent) {
+      const content = outputFormat === "json" && value ? safeParseJSON(value) : value || "";
+      editor.commands.setContent(content, { emitUpdate: false });
+    }
+  }, [editor, value, outputFormat]);
+  useEffect(() => {
+    if (editor) {
+      editor.setEditable(!disabled && !readOnly);
+    }
+  }, [editor, disabled, readOnly]);
+  if (!editor) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      borderWidth: "1px",
+      borderRadius: "md",
+      borderColor: hasError ? "border.error" : "border",
+      overflow: "hidden",
+      "data-field-name": fieldName,
+      _focusWithin: {
+        borderColor: hasError ? "border.error" : "colorPalette.500",
+        boxShadow: hasError ? "0 0 0 1px var(--chakra-colors-border-error)" : "0 0 0 1px var(--chakra-colors-colorPalette-500)"
+      },
+      children: [
+        showToolbar && !readOnly && /* @__PURE__ */ jsx(HStack, { p: 1, gap: 0.5, borderBottomWidth: "1px", borderColor: "border", bg: "bg.subtle", flexWrap: "wrap", children: toolbarButtons.map((button) => {
+          if (button === "link") {
+            return /* @__PURE__ */ jsx(LinkPopover, { editor, disabled }, button);
+          }
+          if (button === "image") {
+            if (!imageUpload) {
+              return null;
+            }
+            return /* @__PURE__ */ jsx(ImagePopover, { editor, config: imageUpload, disabled }, button);
+          }
+          const config = TOOLBAR_CONFIG[button];
+          const isActive = config.isActive?.(editor) ?? false;
+          return /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": config.label,
+              size: "sm",
+              variant: isActive ? "solid" : "ghost",
+              colorPalette: isActive ? "brand" : void 0,
+              onClick: () => config.action(editor),
+              disabled,
+              children: config.icon
+            },
+            button
+          );
+        }) }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            minHeight,
+            maxHeight,
+            overflowY: maxHeight ? "auto" : void 0,
+            p: 3,
+            css: {
+              "& .tiptap": {
+                outline: "none",
+                minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight
+              },
+              "& .tiptap p.is-editor-empty:first-child::before": {
+                color: "var(--chakra-colors-fg-muted)",
+                content: "attr(data-placeholder)",
+                float: "left",
+                height: 0,
+                pointerEvents: "none"
+              },
+              "& .tiptap h1": {
+                fontSize: "2xl",
+                fontWeight: "bold",
+                marginTop: "1em",
+                marginBottom: "0.5em"
+              },
+              "& .tiptap h2": {
+                fontSize: "xl",
+                fontWeight: "bold",
+                marginTop: "1em",
+                marginBottom: "0.5em"
+              },
+              "& .tiptap h3": {
+                fontSize: "lg",
+                fontWeight: "semibold",
+                marginTop: "1em",
+                marginBottom: "0.5em"
+              },
+              "& .tiptap ul, & .tiptap ol": {
+                paddingLeft: "1.5em",
+                marginTop: "0.5em",
+                marginBottom: "0.5em"
+              },
+              "& .tiptap blockquote": {
+                borderLeft: "3px solid var(--chakra-colors-border)",
+                paddingLeft: "1em",
+                marginLeft: 0,
+                marginTop: "0.5em",
+                marginBottom: "0.5em",
+                fontStyle: "italic",
+                color: "var(--chakra-colors-fg-muted)"
+              },
+              "& .tiptap code": {
+                backgroundColor: "var(--chakra-colors-bg-subtle)",
+                borderRadius: "3px",
+                padding: "0.2em 0.4em",
+                fontFamily: "mono",
+                fontSize: "0.9em"
+              },
+              "& .tiptap a": {
+                color: "var(--chakra-colors-colorPalette-500)",
+                textDecoration: "underline",
+                cursor: "pointer"
+              },
+              "& .tiptap p": {
+                marginTop: "0.25em",
+                marginBottom: "0.25em"
+              },
+              "& .tiptap img, & .tiptap .richtext-image": {
+                maxWidth: "100%",
+                height: "auto",
+                borderRadius: "4px",
+                marginTop: "0.5em",
+                marginBottom: "0.5em"
+              }
+            },
+            children: /* @__PURE__ */ jsx(EditorContent, { editor })
+          }
+        )
+      ]
+    }
+  );
+}
+function getInputModeFromType(type) {
+  switch (type) {
+    case "email":
+      return "email";
+    case "tel":
+      return "tel";
+    case "url":
+      return "url";
+    default:
+      return "text";
+  }
+}
+var FieldString = createField({
+  displayName: "FieldString",
+  render: ({ field, fullPath, resolved, hasError, errorMessage, isValidating, componentProps }) => {
+    const { constraints } = resolved;
+    const type = componentProps.type ?? constraints.string?.inputType ?? "text";
+    const maxLength = componentProps.maxLength ?? constraints.string?.maxLength;
+    const minLength = componentProps.minLength ?? constraints.string?.minLength;
+    const pattern = componentProps.pattern ?? constraints.string?.pattern;
+    const inputMode = componentProps.inputMode ?? getInputModeFromType(type);
+    return /* @__PURE__ */ jsx(
+      FieldWrapper,
+      {
+        resolved,
+        hasError,
+        errorMessage,
+        isValidating,
+        fullPath,
+        children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            type,
+            inputMode,
+            value: field.state.value ?? "",
+            onChange: (e) => field.handleChange(e.target.value),
+            onBlur: field.handleBlur,
+            placeholder: resolved.placeholder,
+            maxLength,
+            minLength,
+            pattern,
+            autoComplete: componentProps.autoComplete ?? resolved.autocomplete,
+            "data-field-name": fullPath
+          }
+        )
+      }
+    );
+  }
+});
+var FieldTextarea = createField({
+  displayName: "FieldTextarea",
+  render: ({ field, fullPath, resolved, hasError, errorMessage, componentProps }) => {
+    const { constraints } = resolved;
+    const maxLength = componentProps.maxLength ?? constraints.string?.maxLength;
+    return /* @__PURE__ */ jsx(FieldWrapper, { resolved, hasError, errorMessage, fullPath, children: /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        value: field.state.value ?? "",
+        onChange: (e) => field.handleChange(e.target.value),
+        onBlur: field.handleBlur,
+        placeholder: resolved.placeholder,
+        rows: componentProps.rows,
+        autoresize: componentProps.autoresize,
+        resize: componentProps.resize ?? "vertical",
+        maxLength,
+        autoComplete: resolved.autocomplete,
+        "data-field-name": fullPath
+      }
+    ) });
+  }
+});
+var FieldMaskedInput = createField({
+  displayName: "FieldMaskedInput",
+  useFieldState: (props) => {
+    const {
+      mask,
+      placeholderChar = "_",
+      showMaskOnFocus = true,
+      showMaskOnHover = false,
+      clearIncomplete = false,
+      autoUnmask = false
+    } = props;
+    const maskRef = useCallback(
+      (element) => {
+        if (element && mask) {
+          const maskCallback = withMask(mask, {
+            placeholder: placeholderChar,
+            showMaskOnFocus,
+            showMaskOnHover,
+            clearIncomplete,
+            autoUnmask
+          });
+          maskCallback(element);
+        }
+      },
+      [mask, placeholderChar, showMaskOnFocus, showMaskOnHover, clearIncomplete, autoUnmask]
+    );
+    return { maskRef };
+  },
+  render: ({ field, fullPath, resolved, hasError, errorMessage, fieldState }) => /* @__PURE__ */ jsx(FieldWrapper, { resolved, hasError, errorMessage, fullPath, children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref: fieldState.maskRef,
+      value: field.state.value ?? "",
+      onChange: (e) => field.handleChange(e.target.value),
+      onBlur: field.handleBlur,
+      placeholder: resolved.placeholder,
+      "data-field-name": fullPath
+    }
+  ) })
+});
+
+export { DEFAULT_TOOLBAR_BUTTONS, FieldEditable, FieldMaskedInput, FieldPassword, FieldPasswordStrength, FieldRichText, FieldString, FieldTextarea, TOOLBAR_CONFIG };
+//# sourceMappingURL=chunk-DQUVUMCX.js.map
+//# sourceMappingURL=chunk-DQUVUMCX.js.map