formik-mui-fields 0.1.0

package/dist/index.cjs

@@ -0,0 +1,646 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  FormikAutocomplete: () => FormikAutocomplete_default,
+  FormikCheckbox: () => FormikCheckbox_default,
+  FormikColorPicker: () => FormikColorPicker_default,
+  FormikDatePicker: () => FormikDatePicker_default,
+  FormikFontPicker: () => FormikFontPicker_default,
+  FormikImageUpload: () => FormikImageUpload_default,
+  FormikRadioGroup: () => FormikRadioGroup_default,
+  FormikRating: () => FormikRating_default,
+  FormikSelect: () => FormikSelect_default,
+  FormikSlider: () => FormikSlider_default,
+  FormikSwitch: () => FormikSwitch_default,
+  FormikTextField: () => FormikTextField_default,
+  FormikToggleButtonGroup: () => FormikToggleButtonGroup_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/FormikTextField/FormikTextField.tsx
+var import_material = require("@mui/material");
+var import_formik = require("formik");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FormikTextField = ({ name, ...props }) => {
+  const [field, meta] = (0, import_formik.useField)(name);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_material.TextField,
+    {
+      ...field,
+      ...props,
+      error: meta.touched && Boolean(meta.error),
+      helperText: meta.touched && meta.error
+    }
+  );
+};
+var FormikTextField_default = FormikTextField;
+
+// src/FormikSelect/FormikSelect.tsx
+var import_material2 = require("@mui/material");
+var import_formik2 = require("formik");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FormikSelect = ({ name, label, options, ...props }) => {
+  const [field, meta] = (0, import_formik2.useField)(name);
+  const hasError = meta.touched && Boolean(meta.error);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.FormControl, { fullWidth: true, error: hasError, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.FormLabel, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Select, { ...field, ...props, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.MenuItem, { value: option.value, children: option.label }, option.value)) }),
+    hasError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.FormHelperText, { children: meta.error })
+  ] });
+};
+var FormikSelect_default = FormikSelect;
+
+// src/FormikRadioGroup/FormikRadioGroup.tsx
+var import_material3 = require("@mui/material");
+var import_formik3 = require("formik");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var FormikRadioGroup = ({ name, label, options, row }) => {
+  const [field, meta] = (0, import_formik3.useField)(name);
+  const hasError = meta.touched && Boolean(meta.error);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material3.FormControl, { error: hasError, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.FormLabel, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.RadioGroup, { ...field, row, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_material3.FormControlLabel,
+      {
+        value: option.value,
+        control: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Radio, {}),
+        label: option.label
+      },
+      option.value
+    )) }),
+    hasError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.FormHelperText, { children: meta.error })
+  ] });
+};
+var FormikRadioGroup_default = FormikRadioGroup;
+
+// src/FormikSlider/FormikSlider.tsx
+var import_material4 = require("@mui/material");
+var import_formik4 = require("formik");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var FormikSlider = ({ name, label, ...props }) => {
+  const [field, meta, helpers] = (0, import_formik4.useField)(name);
+  const hasError = meta.touched && Boolean(meta.error);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material4.FormControl, { fullWidth: true, error: hasError, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.FormLabel, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_material4.Slider,
+      {
+        ...props,
+        value: field.value,
+        onChange: (_, value) => helpers.setValue(value),
+        onBlur: field.onBlur
+      }
+    ),
+    hasError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.FormHelperText, { children: meta.error })
+  ] });
+};
+var FormikSlider_default = FormikSlider;
+
+// src/FormikColorPicker/FormikColorPicker.tsx
+var import_material5 = require("@mui/material");
+var import_formik5 = require("formik");
+var import_react = require("react");
+var import_react_color = require("react-color");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var FormikColorPicker = ({ name, label }) => {
+  const [field, , helpers] = (0, import_formik5.useField)(name);
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const anchorRef = (0, import_react.useRef)(null);
+  const handleChange = (color) => {
+    helpers.setValue(color.hex);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material5.FormControl, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.FormLabel, { sx: { mb: 1 }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_material5.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__ */ (0, import_jsx_runtime5.jsx)(
+      import_material5.Popper,
+      {
+        open,
+        anchorEl: anchorRef.current,
+        placement: "bottom-start",
+        sx: { zIndex: 1500 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.ClickAwayListener, { onClickAway: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_react_color.ChromePicker,
+          {
+            color: field.value,
+            onChange: handleChange,
+            disableAlpha: true
+          }
+        ) }) })
+      }
+    )
+  ] });
+};
+var FormikColorPicker_default = FormikColorPicker;
+
+// src/FormikFontPicker/FormikFontPicker.tsx
+var import_react2 = require("react");
+var import_material6 = require("@mui/material");
+var import_formik6 = require("formik");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var FormikFontPicker = ({ name, label }) => {
+  const [fonts, setFonts] = (0, import_react2.useState)([]);
+  const [loading, setLoading] = (0, import_react2.useState)(true);
+  const [field, meta, helpers] = (0, import_formik6.useField)(name);
+  (0, import_react2.useEffect)(() => {
+    fetch("/api/google/fonts").then((res) => res.json()).then((data) => setFonts(data)).catch(() => setFonts([])).finally(() => setLoading(false));
+  }, []);
+  (0, import_react2.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__ */ (0, import_jsx_runtime6.jsxs)(import_material6.FormControl, { fullWidth: true, error: hasError, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material6.FormLabel, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_material6.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__ */ (0, import_jsx_runtime6.jsx)(
+          import_material6.TextField,
+          {
+            ...params,
+            size: "small",
+            error: hasError,
+            helperText: hasError ? meta.error : void 0
+          }
+        )
+      }
+    )
+  ] });
+};
+var FormikFontPicker_default = FormikFontPicker;
+
+// src/FormikImageUpload/FormikImageUpload.tsx
+var import_material8 = require("@mui/material");
+var import_formik7 = require("formik");
+var import_react4 = require("react");
+
+// src/CropDialog/CropDialog.tsx
+var import_material7 = require("@mui/material");
+var import_react3 = require("react");
+var import_react_image_crop = __toESM(require("react-image-crop"), 1);
+var import_ReactCrop = require("react-image-crop/dist/ReactCrop.css");
+var import_jsx_runtime7 = require("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 = (0, import_react3.useRef)(null);
+  const [selectedAspect, setSelectedAspect] = (0, import_react3.useState)(
+    cropOptions[0]
+  );
+  const [crop, setCrop] = (0, import_react3.useState)();
+  const handleImageLoad = (0, import_react3.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 = (0, import_react3.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 = (0, import_react3.useCallback)(() => {
+    if (!imgRef.current || !crop) return;
+    const url = getCroppedImageUrl(imgRef.current, crop);
+    onConfirm(url);
+  }, [crop, onConfirm]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_material7.Dialog, { open, onClose: onCancel, maxWidth: "md", fullWidth: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.DialogTitle, { children: "Crop Image" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.DialogContent, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      import_material7.Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 2,
+          mt: 1
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            import_react_image_crop.default,
+            {
+              crop,
+              onChange: (c) => setCrop(c),
+              aspect: ASPECT_RATIOS[selectedAspect],
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "img",
+                {
+                  src: imageSrc,
+                  alt: "Crop preview",
+                  onLoad: handleImageLoad,
+                  style: { maxWidth: "100%", maxHeight: 400 }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_material7.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: "Aspect ratio" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_material7.ToggleButtonGroup,
+              {
+                value: selectedAspect,
+                exclusive: true,
+                onChange: handleAspectChange,
+                size: "small",
+                children: cropOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.ToggleButton, { value: option, children: option }, option))
+              }
+            )
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_material7.DialogActions, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.Button, { onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.Button, { variant: "contained", onClick: handleConfirm, children: "Confirm" })
+    ] })
+  ] });
+};
+var CropDialog_default = CropDialog;
+
+// src/FormikImageUpload/FormikImageUpload.tsx
+var import_jsx_runtime8 = require("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] = (0, import_formik7.useField)(name);
+  const hasError = meta.touched && Boolean(meta.error);
+  const [rawImageSrc, setRawImageSrc] = (0, import_react4.useState)(null);
+  const handleFileChange = (0, import_react4.useCallback)(
+    (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 = (0, import_react4.useCallback)(
+    (croppedUrl) => {
+      helpers.setValue(croppedUrl);
+      setRawImageSrc(null);
+    },
+    [helpers]
+  );
+  const handleCropCancel = (0, import_react4.useCallback)(() => {
+    setRawImageSrc(null);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material8.FormControl, { fullWidth: true, error: hasError, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material8.Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      import_material8.Box,
+      {
+        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__ */ (0, import_jsx_runtime8.jsx)(import_material8.Typography, { variant: "body2", color: "text.secondary", children: "Upload image" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "input",
+            {
+              type: "file",
+              accept: "image/*",
+              hidden: true,
+              onChange: handleFileChange
+            }
+          )
+        ]
+      }
+    ),
+    hasError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material8.FormHelperText, { children: meta.error }),
+    cropEnabled && rawImageSrc && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      CropDialog_default,
+      {
+        open: true,
+        imageSrc: rawImageSrc,
+        cropOptions,
+        onConfirm: handleCropConfirm,
+        onCancel: handleCropCancel
+      }
+    )
+  ] });
+};
+var FormikImageUpload_default = FormikImageUpload;
+
+// src/FormikCheckbox/FormikCheckbox.tsx
+var import_material9 = require("@mui/material");
+var import_formik8 = require("formik");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var FormikCheckbox = ({ name, label, ...props }) => {
+  const [field, meta] = (0, import_formik8.useField)({ name, type: "checkbox" });
+  const hasError = meta.touched && Boolean(meta.error);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material9.FormControl, { error: hasError, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_material9.FormControlLabel,
+      {
+        control: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material9.Checkbox, { ...field, ...props, checked: field.checked }),
+        label: label ?? ""
+      }
+    ),
+    hasError && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material9.FormHelperText, { children: meta.error })
+  ] });
+};
+var FormikCheckbox_default = FormikCheckbox;
+
+// src/FormikSwitch/FormikSwitch.tsx
+var import_material10 = require("@mui/material");
+var import_formik9 = require("formik");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var FormikSwitch = ({ name, label, ...props }) => {
+  const [field, meta] = (0, import_formik9.useField)({ name, type: "checkbox" });
+  const hasError = meta.touched && Boolean(meta.error);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_material10.FormControl, { error: hasError, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_material10.FormControlLabel,
+      {
+        control: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material10.Switch, { ...field, ...props, checked: field.checked }),
+        label: label ?? ""
+      }
+    ),
+    hasError && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material10.FormHelperText, { children: meta.error })
+  ] });
+};
+var FormikSwitch_default = FormikSwitch;
+
+// src/FormikAutocomplete/FormikAutocomplete.tsx
+var import_material11 = require("@mui/material");
+var import_formik10 = require("formik");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var FormikAutocomplete = ({
+  name,
+  label,
+  options,
+  getOptionLabel,
+  isOptionEqualToValue,
+  ...props
+}) => {
+  const [field, meta, helpers] = (0, import_formik10.useField)(name);
+  const hasError = meta.touched && Boolean(meta.error);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material11.FormControl, { fullWidth: true, error: hasError, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material11.FormLabel, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_material11.Autocomplete,
+      {
+        ...props,
+        options,
+        getOptionLabel,
+        isOptionEqualToValue,
+        value: field.value ?? null,
+        onChange: (_, newValue) => helpers.setValue(newValue),
+        onBlur: () => helpers.setTouched(true),
+        renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_material11.TextField,
+          {
+            ...params,
+            error: hasError,
+            helperText: hasError ? meta.error : void 0
+          }
+        )
+      }
+    )
+  ] });
+};
+var FormikAutocomplete_default = FormikAutocomplete;
+
+// src/FormikRating/FormikRating.tsx
+var import_material12 = require("@mui/material");
+var import_formik11 = require("formik");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var FormikRating = ({ name, label, ...props }) => {
+  const [field, meta, helpers] = (0, import_formik11.useField)(name);
+  const hasError = meta.touched && Boolean(meta.error);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_material12.FormControl, { error: hasError, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material12.FormLabel, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_material12.Rating,
+      {
+        ...props,
+        name,
+        value: field.value ?? null,
+        onChange: (_, newValue) => helpers.setValue(newValue),
+        onBlur: field.onBlur
+      }
+    ),
+    hasError && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material12.FormHelperText, { children: meta.error })
+  ] });
+};
+var FormikRating_default = FormikRating;
+
+// src/FormikToggleButtonGroup/FormikToggleButtonGroup.tsx
+var import_material13 = require("@mui/material");
+var import_formik12 = require("formik");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var FormikToggleButtonGroup = ({ name, label, options, ...props }) => {
+  const [field, meta, helpers] = (0, import_formik12.useField)(name);
+  const hasError = meta.touched && Boolean(meta.error);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material13.FormControl, { error: hasError, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material13.FormLabel, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_material13.ToggleButtonGroup,
+      {
+        ...props,
+        value: field.value,
+        onChange: (_, newValue) => {
+          if (newValue !== null) {
+            helpers.setValue(newValue);
+          }
+        },
+        onBlur: field.onBlur,
+        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material13.ToggleButton, { value: option.value, children: option.label }, option.value))
+      }
+    ),
+    hasError && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material13.FormHelperText, { children: meta.error })
+  ] });
+};
+var FormikToggleButtonGroup_default = FormikToggleButtonGroup;
+
+// src/FormikDatePicker/FormikDatePicker.tsx
+var import_material14 = require("@mui/material");
+var import_DatePicker = require("@mui/x-date-pickers/DatePicker");
+var import_formik13 = require("formik");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var FormikDatePicker = ({ name, label, ...props }) => {
+  const [field, meta, helpers] = (0, import_formik13.useField)(name);
+  const hasError = meta.touched && Boolean(meta.error);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material14.FormControl, { fullWidth: true, error: hasError, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material14.FormLabel, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_DatePicker.DatePicker,
+      {
+        ...props,
+        value: field.value ?? null,
+        onChange: (value) => helpers.setValue(value),
+        slotProps: {
+          textField: {
+            onBlur: () => helpers.setTouched(true),
+            error: hasError
+          },
+          ...props.slotProps
+        }
+      }
+    ),
+    hasError && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material14.FormHelperText, { children: meta.error })
+  ] });
+};
+var FormikDatePicker_default = FormikDatePicker;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormikAutocomplete,
+  FormikCheckbox,
+  FormikColorPicker,
+  FormikDatePicker,
+  FormikFontPicker,
+  FormikImageUpload,
+  FormikRadioGroup,
+  FormikRating,
+  FormikSelect,
+  FormikSlider,
+  FormikSwitch,
+  FormikTextField,
+  FormikToggleButtonGroup
+});