formik-mui-fields 0.1.0

package/dist/index.js

@@ -0,0 +1,660 @@
+"use client";
+
+// src/FormikTextField/FormikTextField.tsx
+import { TextField } from "@mui/material";
+import { useField } from "formik";
+import { jsx } from "react/jsx-runtime";
+var FormikTextField = ({ name, ...props }) => {
+  const [field, meta] = useField(name);
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      ...field,
+      ...props,
+      error: meta.touched && Boolean(meta.error),
+      helperText: meta.touched && meta.error
+    }
+  );
+};
+var FormikTextField_default = FormikTextField;
+
+// src/FormikSelect/FormikSelect.tsx
+import {
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  MenuItem,
+  Select
+} from "@mui/material";
+import { useField as useField2 } from "formik";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var FormikSelect = ({ name, label, options, ...props }) => {
+  const [field, meta] = useField2(name);
+  const hasError = meta.touched && Boolean(meta.error);
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, error: hasError, children: [
+    label && /* @__PURE__ */ jsx2(FormLabel, { children: label }),
+    /* @__PURE__ */ jsx2(Select, { ...field, ...props, children: options.map((option) => /* @__PURE__ */ jsx2(MenuItem, { value: option.value, children: option.label }, option.value)) }),
+    hasError && /* @__PURE__ */ jsx2(FormHelperText, { children: meta.error })
+  ] });
+};
+var FormikSelect_default = FormikSelect;
+
+// src/FormikRadioGroup/FormikRadioGroup.tsx
+import {
+  FormControl as FormControl2,
+  FormControlLabel,
+  FormHelperText as FormHelperText2,
+  FormLabel as FormLabel2,
+  Radio,
+  RadioGroup
+} from "@mui/material";
+import { useField as useField3 } from "formik";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var FormikRadioGroup = ({ name, label, options, row }) => {
+  const [field, meta] = useField3(name);
+  const hasError = meta.touched && Boolean(meta.error);
+  return /* @__PURE__ */ jsxs2(FormControl2, { error: hasError, children: [
+    label && /* @__PURE__ */ jsx3(FormLabel2, { children: label }),
+    /* @__PURE__ */ jsx3(RadioGroup, { ...field, row, children: options.map((option) => /* @__PURE__ */ jsx3(
+      FormControlLabel,
+      {
+        value: option.value,
+        control: /* @__PURE__ */ jsx3(Radio, {}),
+        label: option.label
+      },
+      option.value
+    )) }),
+    hasError && /* @__PURE__ */ jsx3(FormHelperText2, { children: meta.error })
+  ] });
+};
+var FormikRadioGroup_default = FormikRadioGroup;
+
+// src/FormikSlider/FormikSlider.tsx
+import {
+  FormControl as FormControl3,
+  FormHelperText as FormHelperText3,
+  FormLabel as FormLabel3,
+  Slider
+} from "@mui/material";
+import { useField as useField4 } from "formik";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var FormikSlider = ({ name, label, ...props }) => {
+  const [field, meta, helpers] = useField4(name);
+  const hasError = meta.touched && Boolean(meta.error);
+  return /* @__PURE__ */ jsxs3(FormControl3, { fullWidth: true, error: hasError, children: [
+    label && /* @__PURE__ */ jsx4(FormLabel3, { children: label }),
+    /* @__PURE__ */ jsx4(
+      Slider,
+      {
+        ...props,
+        value: field.value,
+        onChange: (_, value) => helpers.setValue(value),
+        onBlur: field.onBlur
+      }
+    ),
+    hasError && /* @__PURE__ */ jsx4(FormHelperText3, { children: meta.error })
+  ] });
+};
+var FormikSlider_default = FormikSlider;
+
+// src/FormikColorPicker/FormikColorPicker.tsx
+import {
+  Box,
+  ClickAwayListener,
+  FormControl as FormControl4,
+  FormLabel as FormLabel4,
+  Popper
+} from "@mui/material";
+import { useField as useField5 } from "formik";
+import { useRef, useState } from "react";
+import { ChromePicker } from "react-color";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var FormikColorPicker = ({ name, label }) => {
+  const [field, , helpers] = useField5(name);
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef(null);
+  const handleChange = (color) => {
+    helpers.setValue(color.hex);
+  };
+  return /* @__PURE__ */ jsxs4(FormControl4, { children: [
+    label && /* @__PURE__ */ jsx5(FormLabel4, { sx: { mb: 1 }, children: label }),
+    /* @__PURE__ */ jsx5(
+      Box,
+      {
+        ref: anchorRef,
+        onClick: () => setOpen((prev) => !prev),
+        sx: {
+          width: 32,
+          height: 32,
+          borderRadius: "50%",
+          backgroundColor: field.value,
+          border: "2px solid",
+          borderColor: "grey.300",
+          cursor: "pointer",
+          transition: "border-color 0.2s",
+          "&:hover": { borderColor: "grey.500" }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      Popper,
+      {
+        open,
+        anchorEl: anchorRef.current,
+        placement: "bottom-start",
+        sx: { zIndex: 1500 },
+        children: /* @__PURE__ */ jsx5(ClickAwayListener, { onClickAway: () => setOpen(false), children: /* @__PURE__ */ jsx5(Box, { children: /* @__PURE__ */ jsx5(
+          ChromePicker,
+          {
+            color: field.value,
+            onChange: handleChange,
+            disableAlpha: true
+          }
+        ) }) })
+      }
+    )
+  ] });
+};
+var FormikColorPicker_default = FormikColorPicker;
+
+// src/FormikFontPicker/FormikFontPicker.tsx
+import { useEffect, useState as useState2 } from "react";
+import { Autocomplete, FormControl as FormControl5, FormLabel as FormLabel5, TextField as TextField2 } from "@mui/material";
+import { useField as useField6 } from "formik";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var FormikFontPicker = ({ name, label }) => {
+  const [fonts, setFonts] = useState2([]);
+  const [loading, setLoading] = useState2(true);
+  const [field, meta, helpers] = useField6(name);
+  useEffect(() => {
+    fetch("/api/google/fonts").then((res) => res.json()).then((data) => setFonts(data)).catch(() => setFonts([])).finally(() => setLoading(false));
+  }, []);
+  useEffect(() => {
+    if (!field.value) return;
+    const linkId = "google-font-preview";
+    let link = document.getElementById(linkId);
+    if (!link) {
+      link = document.createElement("link");
+      link.id = linkId;
+      link.rel = "stylesheet";
+      document.head.appendChild(link);
+    }
+    link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(field.value)}&display=swap`;
+  }, [field.value]);
+  const selectedOption = fonts.find((f) => f.value === field.value) ?? null;
+  const hasError = meta.touched && Boolean(meta.error);
+  return /* @__PURE__ */ jsxs5(FormControl5, { fullWidth: true, error: hasError, children: [
+    label && /* @__PURE__ */ jsx6(FormLabel5, { children: label }),
+    /* @__PURE__ */ jsx6(
+      Autocomplete,
+      {
+        options: fonts,
+        loading,
+        getOptionLabel: (option) => option.label,
+        value: selectedOption,
+        onChange: (_, newValue) => {
+          helpers.setValue(newValue?.value ?? "");
+        },
+        onBlur: () => helpers.setTouched(true),
+        isOptionEqualToValue: (option, value) => option.value === value.value,
+        renderInput: (params) => /* @__PURE__ */ jsx6(
+          TextField2,
+          {
+            ...params,
+            size: "small",
+            error: hasError,
+            helperText: hasError ? meta.error : void 0
+          }
+        )
+      }
+    )
+  ] });
+};
+var FormikFontPicker_default = FormikFontPicker;
+
+// src/FormikImageUpload/FormikImageUpload.tsx
+import { Box as Box3, FormControl as FormControl6, FormHelperText as FormHelperText4, Typography as Typography2 } from "@mui/material";
+import { useField as useField7 } from "formik";
+import { useCallback as useCallback2, useState as useState4 } from "react";
+
+// src/CropDialog/CropDialog.tsx
+import {
+  Box as Box2,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  ToggleButton,
+  ToggleButtonGroup,
+  Typography
+} from "@mui/material";
+import { useCallback, useRef as useRef2, useState as useState3 } from "react";
+import ReactCrop from "react-image-crop";
+import "react-image-crop/dist/ReactCrop.css";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var ASPECT_RATIOS = {
+  "1.91:1": 1.91,
+  "1:1": 1,
+  "3:1": 3
+};
+var getCroppedImageUrl = (image, crop) => {
+  const canvas = document.createElement("canvas");
+  const scaleX = image.naturalWidth / image.width;
+  const scaleY = image.naturalHeight / image.height;
+  canvas.width = crop.width * scaleX;
+  canvas.height = crop.height * scaleY;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+  ctx.drawImage(
+    image,
+    crop.x * scaleX,
+    crop.y * scaleY,
+    crop.width * scaleX,
+    crop.height * scaleY,
+    0,
+    0,
+    canvas.width,
+    canvas.height
+  );
+  return canvas.toDataURL("image/png");
+};
+var CropDialog = ({
+  open,
+  imageSrc,
+  cropOptions,
+  onConfirm,
+  onCancel
+}) => {
+  const imgRef = useRef2(null);
+  const [selectedAspect, setSelectedAspect] = useState3(
+    cropOptions[0]
+  );
+  const [crop, setCrop] = useState3();
+  const handleImageLoad = useCallback(
+    (e) => {
+      imgRef.current = e.currentTarget;
+      const aspect = ASPECT_RATIOS[selectedAspect];
+      const { width, height } = e.currentTarget;
+      const cropWidth = Math.min(width, height * aspect);
+      const cropHeight = cropWidth / aspect;
+      setCrop({
+        unit: "px",
+        x: (width - cropWidth) / 2,
+        y: (height - cropHeight) / 2,
+        width: cropWidth,
+        height: cropHeight
+      });
+    },
+    [selectedAspect]
+  );
+  const handleAspectChange = useCallback(
+    (_, value) => {
+      if (!value || !imgRef.current) return;
+      setSelectedAspect(value);
+      const aspect = ASPECT_RATIOS[value];
+      const { width, height } = imgRef.current;
+      const cropWidth = Math.min(width, height * aspect);
+      const cropHeight = cropWidth / aspect;
+      setCrop({
+        unit: "px",
+        x: (width - cropWidth) / 2,
+        y: (height - cropHeight) / 2,
+        width: cropWidth,
+        height: cropHeight
+      });
+    },
+    []
+  );
+  const handleConfirm = useCallback(() => {
+    if (!imgRef.current || !crop) return;
+    const url = getCroppedImageUrl(imgRef.current, crop);
+    onConfirm(url);
+  }, [crop, onConfirm]);
+  return /* @__PURE__ */ jsxs6(Dialog, { open, onClose: onCancel, maxWidth: "md", fullWidth: true, children: [
+    /* @__PURE__ */ jsx7(DialogTitle, { children: "Crop Image" }),
+    /* @__PURE__ */ jsx7(DialogContent, { children: /* @__PURE__ */ jsxs6(
+      Box2,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 2,
+          mt: 1
+        },
+        children: [
+          /* @__PURE__ */ jsx7(
+            ReactCrop,
+            {
+              crop,
+              onChange: (c) => setCrop(c),
+              aspect: ASPECT_RATIOS[selectedAspect],
+              children: /* @__PURE__ */ jsx7(
+                "img",
+                {
+                  src: imageSrc,
+                  alt: "Crop preview",
+                  onLoad: handleImageLoad,
+                  style: { maxWidth: "100%", maxHeight: 400 }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs6(Box2, { children: [
+            /* @__PURE__ */ jsx7(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: "Aspect ratio" }),
+            /* @__PURE__ */ jsx7(
+              ToggleButtonGroup,
+              {
+                value: selectedAspect,
+                exclusive: true,
+                onChange: handleAspectChange,
+                size: "small",
+                children: cropOptions.map((option) => /* @__PURE__ */ jsx7(ToggleButton, { value: option, children: option }, option))
+              }
+            )
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs6(DialogActions, { children: [
+      /* @__PURE__ */ jsx7(Button, { onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx7(Button, { variant: "contained", onClick: handleConfirm, children: "Confirm" })
+    ] })
+  ] });
+};
+var CropDialog_default = CropDialog;
+
+// src/FormikImageUpload/FormikImageUpload.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var ALL_CROP_OPTIONS = ["1.91:1", "1:1", "3:1"];
+var FormikImageUpload = ({
+  name,
+  label,
+  height = 120,
+  cropEnabled = false,
+  cropOptions = ALL_CROP_OPTIONS
+}) => {
+  const [field, meta, helpers] = useField7(name);
+  const hasError = meta.touched && Boolean(meta.error);
+  const [rawImageSrc, setRawImageSrc] = useState4(null);
+  const handleFileChange = useCallback2(
+    (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      const url = URL.createObjectURL(file);
+      if (cropEnabled) {
+        setRawImageSrc(url);
+      } else {
+        helpers.setValue(url);
+      }
+      e.target.value = "";
+    },
+    [helpers, cropEnabled]
+  );
+  const handleCropConfirm = useCallback2(
+    (croppedUrl) => {
+      helpers.setValue(croppedUrl);
+      setRawImageSrc(null);
+    },
+    [helpers]
+  );
+  const handleCropCancel = useCallback2(() => {
+    setRawImageSrc(null);
+  }, []);
+  return /* @__PURE__ */ jsxs7(FormControl6, { fullWidth: true, error: hasError, children: [
+    label && /* @__PURE__ */ jsx8(Typography2, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: label }),
+    /* @__PURE__ */ jsxs7(
+      Box3,
+      {
+        component: "label",
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%",
+          height,
+          border: "2px dashed",
+          borderColor: hasError ? "error.main" : "divider",
+          borderRadius: 1,
+          cursor: "pointer",
+          overflow: "hidden",
+          backgroundImage: field.value ? `url(${field.value})` : "none",
+          backgroundSize: "contain",
+          backgroundRepeat: "no-repeat",
+          backgroundPosition: "center",
+          "&:hover": { borderColor: "primary.main" }
+        },
+        children: [
+          !field.value && /* @__PURE__ */ jsx8(Typography2, { variant: "body2", color: "text.secondary", children: "Upload image" }),
+          /* @__PURE__ */ jsx8(
+            "input",
+            {
+              type: "file",
+              accept: "image/*",
+              hidden: true,
+              onChange: handleFileChange
+            }
+          )
+        ]
+      }
+    ),
+    hasError && /* @__PURE__ */ jsx8(FormHelperText4, { children: meta.error }),
+    cropEnabled && rawImageSrc && /* @__PURE__ */ jsx8(
+      CropDialog_default,
+      {
+        open: true,
+        imageSrc: rawImageSrc,
+        cropOptions,
+        onConfirm: handleCropConfirm,
+        onCancel: handleCropCancel
+      }
+    )
+  ] });
+};
+var FormikImageUpload_default = FormikImageUpload;
+
+// src/FormikCheckbox/FormikCheckbox.tsx
+import {
+  Checkbox,
+  FormControl as FormControl7,
+  FormControlLabel as FormControlLabel2,
+  FormHelperText as FormHelperText5
+} from "@mui/material";
+import { useField as useField8 } from "formik";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var FormikCheckbox = ({ name, label, ...props }) => {
+  const [field, meta] = useField8({ name, type: "checkbox" });
+  const hasError = meta.touched && Boolean(meta.error);
+  return /* @__PURE__ */ jsxs8(FormControl7, { error: hasError, children: [
+    /* @__PURE__ */ jsx9(
+      FormControlLabel2,
+      {
+        control: /* @__PURE__ */ jsx9(Checkbox, { ...field, ...props, checked: field.checked }),
+        label: label ?? ""
+      }
+    ),
+    hasError && /* @__PURE__ */ jsx9(FormHelperText5, { children: meta.error })
+  ] });
+};
+var FormikCheckbox_default = FormikCheckbox;
+
+// src/FormikSwitch/FormikSwitch.tsx
+import {
+  FormControl as FormControl8,
+  FormControlLabel as FormControlLabel3,
+  FormHelperText as FormHelperText6,
+  Switch
+} from "@mui/material";
+import { useField as useField9 } from "formik";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var FormikSwitch = ({ name, label, ...props }) => {
+  const [field, meta] = useField9({ name, type: "checkbox" });
+  const hasError = meta.touched && Boolean(meta.error);
+  return /* @__PURE__ */ jsxs9(FormControl8, { error: hasError, children: [
+    /* @__PURE__ */ jsx10(
+      FormControlLabel3,
+      {
+        control: /* @__PURE__ */ jsx10(Switch, { ...field, ...props, checked: field.checked }),
+        label: label ?? ""
+      }
+    ),
+    hasError && /* @__PURE__ */ jsx10(FormHelperText6, { children: meta.error })
+  ] });
+};
+var FormikSwitch_default = FormikSwitch;
+
+// src/FormikAutocomplete/FormikAutocomplete.tsx
+import {
+  Autocomplete as Autocomplete2,
+  FormControl as FormControl9,
+  FormLabel as FormLabel6,
+  TextField as TextField3
+} from "@mui/material";
+import { useField as useField10 } from "formik";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var FormikAutocomplete = ({
+  name,
+  label,
+  options,
+  getOptionLabel,
+  isOptionEqualToValue,
+  ...props
+}) => {
+  const [field, meta, helpers] = useField10(name);
+  const hasError = meta.touched && Boolean(meta.error);
+  return /* @__PURE__ */ jsxs10(FormControl9, { fullWidth: true, error: hasError, children: [
+    label && /* @__PURE__ */ jsx11(FormLabel6, { children: label }),
+    /* @__PURE__ */ jsx11(
+      Autocomplete2,
+      {
+        ...props,
+        options,
+        getOptionLabel,
+        isOptionEqualToValue,
+        value: field.value ?? null,
+        onChange: (_, newValue) => helpers.setValue(newValue),
+        onBlur: () => helpers.setTouched(true),
+        renderInput: (params) => /* @__PURE__ */ jsx11(
+          TextField3,
+          {
+            ...params,
+            error: hasError,
+            helperText: hasError ? meta.error : void 0
+          }
+        )
+      }
+    )
+  ] });
+};
+var FormikAutocomplete_default = FormikAutocomplete;
+
+// src/FormikRating/FormikRating.tsx
+import {
+  FormControl as FormControl10,
+  FormHelperText as FormHelperText7,
+  FormLabel as FormLabel7,
+  Rating
+} from "@mui/material";
+import { useField as useField11 } from "formik";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var FormikRating = ({ name, label, ...props }) => {
+  const [field, meta, helpers] = useField11(name);
+  const hasError = meta.touched && Boolean(meta.error);
+  return /* @__PURE__ */ jsxs11(FormControl10, { error: hasError, children: [
+    label && /* @__PURE__ */ jsx12(FormLabel7, { children: label }),
+    /* @__PURE__ */ jsx12(
+      Rating,
+      {
+        ...props,
+        name,
+        value: field.value ?? null,
+        onChange: (_, newValue) => helpers.setValue(newValue),
+        onBlur: field.onBlur
+      }
+    ),
+    hasError && /* @__PURE__ */ jsx12(FormHelperText7, { children: meta.error })
+  ] });
+};
+var FormikRating_default = FormikRating;
+
+// src/FormikToggleButtonGroup/FormikToggleButtonGroup.tsx
+import {
+  FormControl as FormControl11,
+  FormHelperText as FormHelperText8,
+  FormLabel as FormLabel8,
+  ToggleButton as ToggleButton2,
+  ToggleButtonGroup as ToggleButtonGroup2
+} from "@mui/material";
+import { useField as useField12 } from "formik";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+var FormikToggleButtonGroup = ({ name, label, options, ...props }) => {
+  const [field, meta, helpers] = useField12(name);
+  const hasError = meta.touched && Boolean(meta.error);
+  return /* @__PURE__ */ jsxs12(FormControl11, { error: hasError, children: [
+    label && /* @__PURE__ */ jsx13(FormLabel8, { children: label }),
+    /* @__PURE__ */ jsx13(
+      ToggleButtonGroup2,
+      {
+        ...props,
+        value: field.value,
+        onChange: (_, newValue) => {
+          if (newValue !== null) {
+            helpers.setValue(newValue);
+          }
+        },
+        onBlur: field.onBlur,
+        children: options.map((option) => /* @__PURE__ */ jsx13(ToggleButton2, { value: option.value, children: option.label }, option.value))
+      }
+    ),
+    hasError && /* @__PURE__ */ jsx13(FormHelperText8, { children: meta.error })
+  ] });
+};
+var FormikToggleButtonGroup_default = FormikToggleButtonGroup;
+
+// src/FormikDatePicker/FormikDatePicker.tsx
+import { FormControl as FormControl12, FormHelperText as FormHelperText9, FormLabel as FormLabel9 } from "@mui/material";
+import {
+  DatePicker
+} from "@mui/x-date-pickers/DatePicker";
+import { useField as useField13 } from "formik";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+var FormikDatePicker = ({ name, label, ...props }) => {
+  const [field, meta, helpers] = useField13(name);
+  const hasError = meta.touched && Boolean(meta.error);
+  return /* @__PURE__ */ jsxs13(FormControl12, { fullWidth: true, error: hasError, children: [
+    label && /* @__PURE__ */ jsx14(FormLabel9, { children: label }),
+    /* @__PURE__ */ jsx14(
+      DatePicker,
+      {
+        ...props,
+        value: field.value ?? null,
+        onChange: (value) => helpers.setValue(value),
+        slotProps: {
+          textField: {
+            onBlur: () => helpers.setTouched(true),
+            error: hasError
+          },
+          ...props.slotProps
+        }
+      }
+    ),
+    hasError && /* @__PURE__ */ jsx14(FormHelperText9, { children: meta.error })
+  ] });
+};
+var FormikDatePicker_default = FormikDatePicker;
+export {
+  FormikAutocomplete_default as FormikAutocomplete,
+  FormikCheckbox_default as FormikCheckbox,
+  FormikColorPicker_default as FormikColorPicker,
+  FormikDatePicker_default as FormikDatePicker,
+  FormikFontPicker_default as FormikFontPicker,
+  FormikImageUpload_default as FormikImageUpload,
+  FormikRadioGroup_default as FormikRadioGroup,
+  FormikRating_default as FormikRating,
+  FormikSelect_default as FormikSelect,
+  FormikSlider_default as FormikSlider,
+  FormikSwitch_default as FormikSwitch,
+  FormikTextField_default as FormikTextField,
+  FormikToggleButtonGroup_default as FormikToggleButtonGroup
+};