@digigov/form 2.0.0-36b707c1 → 2.0.0-385c7994

package/inputs/ImageInput/index.js

@@ -1,60 +1,96 @@
-import React, { useState, useCallback } from "react";
-import FileUpload from "@digigov/react-core/FileUpload";
-import FileUploadContainer from "@digigov/react-core/FileUploadContainer";
-import CoreHint from "@digigov/react-core/Hint";
-import Button, { ButtonGroup } from "@digigov/ui/form/Button";
-import { useTranslation } from "@digigov/ui/i18n";
-import Paragraph from "@digigov/ui/typography/Paragraph";
-import { Base } from "@digigov/react-core/Base";
-const Image = React.memo(function Image2({ src }) {
-  return /* @__PURE__ */ React.createElement(Base, { as: "img", src, className: "ds-image--ratio" });
+import react, { useCallback, useEffect, useRef, useState } from "react";
+import { omit } from "../../utils.js";
+import { Button, ButtonGroup } from "@digigov/ui/form/Button/index.js";
+import { FileUpload, FileUploadContainer } from "@digigov/ui/form/FileUpload/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+import { Hint } from "@digigov/ui/typography/Hint/index.js";
+import { Paragraph } from "@digigov/ui/typography/Paragraph/index.js";
+import { Base } from "@digigov/ui/utils/Base/index.js";
+const ImageInput_Image = /*#__PURE__*/ react.memo(function({ src }) {
+    return /*#__PURE__*/ react.createElement(Base, {
+        as: "img",
+        src: src,
+        className: "ds-image--ratio"
+    });
 });
-const ImageInput = React.forwardRef(
-  function ImageInput2({ name, extra = {}, disabled, onChange, reset, ...props }, ref) {
+const blobToFileList = (blob, fileName)=>{
+    const file = new File([
+        blob
+    ], fileName, {
+        type: 'image/jpeg'
+    });
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(file);
+    return dataTransfer.files;
+};
+const ImageInput_ImageInput = /*#__PURE__*/ react.forwardRef(function({ name, disabled, onChange, defaultValue, value, resetField, ...props }, ref) {
+    const imageRef = useRef(ref?.current);
     const { t } = useTranslation();
-    const [selectedImage, setSelectedImage] = useState(null);
-    const [imageUrl, setImageUrl] = useState(null);
-    const handleImageChange = useCallback(
-      (e) => {
+    const currentValue = defaultValue || value || null;
+    const [selectedImage, setSelectedImage] = useState(currentValue);
+    const [imageUrl, setImageUrl] = useState(currentValue?.src || null);
+    const handleImageChange = useCallback((e)=>{
         e.preventDefault();
         const target = e.target;
         const selectedFile = target.files?.[0];
         if (selectedFile) {
-          setSelectedImage(selectedFile);
-          setImageUrl(URL.createObjectURL(selectedFile));
+            setSelectedImage(selectedFile);
+            setImageUrl(URL.createObjectURL(selectedFile));
         }
-        onChange(e);
-      },
-      [selectedImage]
-    );
-    const handleDeleteImage = useCallback(
-      (event) => {
+        onChange(target.files);
+    }, [
+        selectedImage
+    ]);
+    const handleDeleteImage = useCallback((event)=>{
         event.preventDefault();
-        reset({ [name]: "" });
+        resetField(name);
         setSelectedImage(null);
-        setImageUrl("");
-      },
-      [selectedImage]
-    );
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FileUploadContainer, null, selectedImage !== null ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Paragraph, null, /* @__PURE__ */ React.createElement(Base, { as: "b" }, t("upload.image"), ":"), " ", `${selectedImage?.name}`)) : /* @__PURE__ */ React.createElement(CoreHint, { className: "ds-dashed--border" }, t("upload.no_image")), /* @__PURE__ */ React.createElement(React.Fragment, null, selectedImage !== null && /* @__PURE__ */ React.createElement(Image, { src: imageUrl }), /* @__PURE__ */ React.createElement(ButtonGroup, { marginTop: 2 }, selectedImage !== null && /* @__PURE__ */ React.createElement(Button, { variant: "link", onClick: handleDeleteImage }, t("upload.reset_file")), /* @__PURE__ */ React.createElement(
-      FileUpload,
-      {
-        ref,
-        hasFiles: selectedImage !== null,
-        name,
-        disabled,
+        setImageUrl(null);
+    }, [
+        resetField,
+        name
+    ]);
+    useEffect(()=>{
+        if (defaultValue?.src && imageRef.current) fetch(defaultValue?.src).then((response)=>response.blob()).then((blob)=>{
+            const fileList = blobToFileList(blob, defaultValue.filename);
+            imageRef.current.files = fileList;
+            const fileChangeEvent = new Event('change', {
+                bubbles: true
+            });
+            imageRef.current.dispatchEvent(fileChangeEvent);
+        }).catch((error)=>console.error('Error fetching image:', error));
+    }, [
+        defaultValue,
+        imageRef
+    ]);
+    return /*#__PURE__*/ react.createElement(FileUploadContainer, null, null !== selectedImage ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Paragraph, null, /*#__PURE__*/ react.createElement(Base, {
+        as: "b"
+    }, t('upload.image'), ":"), ' ', /*#__PURE__*/ react.createElement("em", null, `${selectedImage?.name || selectedImage?.filename}`))) : /*#__PURE__*/ react.createElement(Hint, {
+        className: "ds-dashed--border"
+    }, t('upload.no_image')), null !== imageUrl && null !== selectedImage && /*#__PURE__*/ react.createElement(ImageInput_Image, {
+        src: imageUrl
+    }), !disabled && /*#__PURE__*/ react.createElement(ButtonGroup, {
+        marginTop: 2
+    }, /*#__PURE__*/ react.createElement(FileUpload, {
+        ref: imageRef,
+        hasFiles: null !== selectedImage,
+        name: name,
+        id: name,
+        disabled: disabled,
         accept: "image/*",
         onChange: handleImageChange,
-        ...{ ...props, required: void 0, type: "file" }
-      },
-      t("upload.choose_image")
-    )))));
-  }
-);
-var ImageInput_default = ImageInput;
-export {
-  Image,
-  ImageInput,
-  ImageInput_default as default
-};
-//# sourceMappingURL=index.js.map
+        ...omit(props, [
+            'Field',
+            'reset',
+            'error'
+        ]),
+        required: void 0,
+        type: 'file'
+    }, selectedImage ? t('upload.change_image') : t('upload.choose_image')), null !== selectedImage && /*#__PURE__*/ react.createElement(Button, {
+        color: "warning",
+        variant: "link",
+        onClick: handleDeleteImage
+    }, t('upload.reset_file'))));
+});
+const inputs_ImageInput = ImageInput_ImageInput;
+export { ImageInput_Image as Image, ImageInput_ImageInput as ImageInput, inputs_ImageInput as default };

package/inputs/Input/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
+import type { UseFormReturn } from 'react-hook-form';
+import type { UncontrolledFieldProps } from '../../Field/types.js';
+export interface InputProps extends Omit<UncontrolledFieldProps, 'extra' | 'Field'> {
     extra?: {
         fullWidth?: boolean;
         multiline?: boolean;
@@ -11,6 +12,8 @@ export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
             max?: number;
         };
     };
+    Field?: UncontrolledFieldProps['Field'];
+    resetField: UseFormReturn['resetField'];
 }
 export declare const Input: React.ExoticComponent<InputProps>;
 export default Input;

package/inputs/Input/index.js

@@ -1,70 +1,69 @@
-import React from "react";
+import react from "react";
 import { useWatch } from "react-hook-form";
-import { Hint } from "@digigov/react-core/Hint";
-import { TextArea } from "@digigov/react-core/TextArea";
-import { TextInput } from "@digigov/react-core/TextInput";
-import { useTranslation } from "@digigov/ui/i18n";
+import { omit } from "../../utils.js";
+import { TextArea } from "@digigov/ui/form/TextArea/index.js";
+import { TextInput } from "@digigov/ui/form/TextInput/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+import { Hint } from "@digigov/ui/typography/Hint/index.js";
 const TYPES_MAP = {
-  string: "text",
-  int: "text",
-  text: "text",
-  date: "date"
+    string: 'text',
+    password: 'password',
+    int: 'text',
+    rate: 'number',
+    text: 'text',
+    date: 'date'
 };
-const Input = React.forwardRef(
-  function WrappedInput({ name, control, type, extra, ...props }, ref) {
+const Input = /*#__PURE__*/ react.forwardRef(function({ name, control, type, extra, ...props }, ref) {
     let { multiline = false, rows, limit } = extra || {};
     const { className } = extra || {};
-    multiline = multiline === true || type === "text";
+    multiline = true === multiline || 'text' === type;
     rows = rows || (multiline ? 4 : 1);
-    const fieldType = TYPES_MAP[type || "text"] || "text";
+    const fieldType = TYPES_MAP[type || 'text'] || 'text';
     const { t } = useTranslation();
-    const currentValue = useWatch({ control, name });
-    const getRemainingChars = (currentValue2, limit2) => {
-      if (currentValue2) {
-        return limit2?.max - currentValue2.length;
-      }
-      return limit2?.max;
+    const currentValue = useWatch({
+        control,
+        name
+    });
+    const getRemainingChars = (currentValue, limit)=>{
+        if (currentValue) return limit?.max - currentValue.length;
+        return limit?.max;
     };
-    const constructRemainingText = (currentValue2, limit2) => {
-      const remainingChars = getRemainingChars(currentValue2, limit2);
-      let remainingText = Math.abs(remainingChars) === 1 ? t("form.info.text.character") : t("form.info.text.characters");
-      remainingText += remainingChars > 0 ? ` ${t("form.info.text.remaining")}.` : ` ${t("form.info.text.too_many")}.`;
-      return remainingText;
+    const constructRemainingText = (currentValue, limit)=>{
+        const remainingChars = getRemainingChars(currentValue, limit);
+        let remainingText = 1 === Math.abs(remainingChars) ? t('form.info.text.character') : t('form.info.text.characters');
+        remainingText += remainingChars > 0 ? ` ${t('form.info.text.remaining')}.` : ` ${t('form.info.text.too_many')}.`;
+        return remainingText;
     };
-    if (multiline === true) {
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        TextArea,
-        {
-          name,
-          className,
-          rows,
-          ref,
-          ...{
-            ...props,
-            reset: void 0,
-            required: void 0,
-            type: fieldType
-          }
-        }
-      ), limit?.max && /* @__PURE__ */ React.createElement(Hint, { display: "flex" }, t("form.info.text.you_have"), /* @__PURE__ */ React.createElement(Hint, { fontWeight: "bold" }, "\xA0", `${Math.abs(getRemainingChars(currentValue, limit))}`, "\xA0"), constructRemainingText(currentValue, limit)));
-    } else {
-      return /* @__PURE__ */ React.createElement(
-        TextInput,
-        {
-          name,
-          type: fieldType,
-          "data-type": type,
-          className,
-          ref,
-          ...{ ...props, reset: void 0, required: void 0 }
-        }
-      );
-    }
-  }
-);
-var Input_default = Input;
-export {
-  Input,
-  Input_default as default
-};
-//# sourceMappingURL=index.js.map
+    const transformedProps = omit(props, [
+        'Field',
+        'resetField'
+    ]);
+    if (true === multiline) return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(TextArea, {
+        name: name,
+        className: className,
+        rows: rows,
+        ref: ref,
+        id: name,
+        ...transformedProps,
+        reset: void 0,
+        required: void 0,
+        type: fieldType
+    }), limit?.max && /*#__PURE__*/ react.createElement(Hint, {
+        display: 'flex'
+    }, t('form.info.text.you_have'), /*#__PURE__*/ react.createElement("strong", null, "\xa0", `${Math.abs(getRemainingChars(currentValue, limit))}`, "\xa0"), constructRemainingText(currentValue, limit)));
+    return /*#__PURE__*/ react.createElement(TextInput, {
+        name: name,
+        id: name,
+        type: fieldType,
+        "data-type": type,
+        className: className,
+        ref: ref,
+        ...transformedProps,
+        min: void 0,
+        max: void 0,
+        reset: void 0,
+        required: void 0
+    });
+});
+const inputs_Input = Input;
+export { Input, inputs_Input as default };

package/inputs/Label/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FieldLabelProps } from '@digigov/form/types';
+import type { FieldLabelProps } from '../../types.js';
 export interface FieldOptionProps {
     label?: FieldLabelProps;
     value: string;
@@ -11,8 +11,6 @@ export interface FieldOptionProps {
 export interface LabelProps {
     primary?: string;
     secondary?: string;
-}
-export interface LabelProps {
     className?: string;
     value?: string;
     label?: FieldLabelProps;

package/inputs/Label/index.js

@@ -1,17 +1,14 @@
-import React from "react";
-import Hint from "@digigov/react-core/Hint";
-import LabelTitle from "@digigov/react-core/LabelTitle";
-import { useTranslation } from "@digigov/ui/i18n";
-const Label = ({ className, label, value }) => {
-  const { t } = useTranslation();
-  if ((!label || label && !label.primary && !label.secondary) && !value) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(LabelTitle, { className, size: "sm" }, label && label.primary && t(label.primary) || value), label && label.secondary && /* @__PURE__ */ React.createElement(Hint, null, t(label.secondary)));
+import react from "react";
+import { LabelTitle } from "@digigov/ui/form/LabelContainer/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+import { Hint } from "@digigov/ui/typography/Hint/index.js";
+const Label_Label = ({ className, label, value })=>{
+    const { t } = useTranslation();
+    if ((!label || label && !label.primary && !label.secondary) && !value) return null;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(LabelTitle, {
+        className: className,
+        size: "sm"
+    }, label && label.primary && t(label.primary) || value), label && label.secondary && /*#__PURE__*/ react.createElement(Hint, null, t(label.secondary)));
 };
-var Label_default = Label;
-export {
-  Label,
-  Label_default as default
-};
-//# sourceMappingURL=index.js.map
+const Label = Label_Label;
+export { Label_Label as Label, Label as default };

package/inputs/OtpInput/index.d.ts

@@ -8,9 +8,5 @@ export declare function useOtp(onChange: any, maxLength: any): {
     handleFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
     handlePaste: (e: React.ClipboardEvent<HTMLInputElement>) => void;
 };
-export declare const OtpInput: ({ name, maxLength, ...props }: {
-    [x: string]: any;
-    name: any;
-    maxLength?: number | undefined;
-}) => React.JSX.Element;
+export declare const OtpInput: React.ForwardRefExoticComponent<Omit<Record<string, any>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default OtpInput;

package/inputs/OtpInput/index.js

@@ -1,146 +1,123 @@
-import React, { useState, useCallback } from "react";
-import SingleCharacterInputs, {
-  SingleCharacterInput
-} from "@digigov/ui/form/SingleCharacterInputs";
+import react, { useCallback, useState } from "react";
+import SingleCharacterInputs, { SingleCharacterInput } from "@digigov/ui/form/SingleCharacterInputs/index.js";
 const RE_DIGIT = new RegExp(/^\d+$/);
 const REMOVE_SPACES = new RegExp(/\s+/g);
 function useOtp(onChange, maxLength) {
-  const [otpValues, setOtpValues] = useState(Array(maxLength).fill(""));
-  const handleChange = useCallback(
-    (otp) => {
-      setOtpValues(otp);
-      const otpValue = otp.join("");
-      onChange(otpValue);
-    },
-    [onChange]
-  );
-  const setOtp = (item, idx) => {
-    const updatedOTPValues = [...otpValues];
-    if (item.length === 1 || item.length === 0) {
-      updatedOTPValues[idx] = item[0] || "";
-      handleChange(updatedOTPValues);
-    } else if (item.length === maxLength) {
-      const valueArray = item.split("").slice(0, maxLength);
-      handleChange(valueArray);
-    }
-  };
-  const setSelectionRange = useCallback((target) => {
-    return target.setSelectionRange(0, target.value.length);
-  }, []);
-  const focusToNextInput = useCallback((target) => {
-    const nextElement = target.nextElementSibling;
-    if (nextElement) {
-      nextElement.focus();
-    }
-  }, []);
-  const focusToPrevInput = useCallback((target) => {
-    const previousElement = target.previousElementSibling;
-    if (previousElement) {
-      previousElement.focus();
-    }
-  }, []);
-  const handleKeyDown = useCallback(
-    (e, idx) => {
-      const { key } = e;
-      const target = e.target;
-      let targetValue = target.value;
-      setSelectionRange(target);
-      if (key === "ArrowRight" || key === "ArrowDown") {
-        e.preventDefault();
-        return focusToNextInput(target);
-      }
-      if (key === "ArrowLeft" || key === "ArrowUp") {
-        e.preventDefault();
-        return focusToPrevInput(target);
-      }
-      if (e.key === "Backspace" || e.key === "Delete") {
-        if (targetValue !== "") {
-          targetValue = "";
-        } else {
-          focusToPrevInput(target);
+    const [otpValues, setOtpValues] = useState(Array(maxLength).fill(''));
+    const handleChange = useCallback((otp)=>{
+        setOtpValues(otp);
+        const otpValue = otp.join('');
+        onChange(otpValue);
+    }, [
+        onChange
+    ]);
+    const setOtp = (item, idx)=>{
+        const updatedOTPValues = [
+            ...otpValues
+        ];
+        if (1 === item.length || 0 === item.length) {
+            updatedOTPValues[idx] = item[0] || '';
+            handleChange(updatedOTPValues);
+        } else if (item.length === maxLength) {
+            const valueArray = item.split('').slice(0, maxLength);
+            handleChange(valueArray);
         }
-        setOtp(targetValue, idx);
-        return e.preventDefault();
-      }
-    },
-    [setOtp, focusToPrevInput, focusToNextInput]
-  );
-  const handleFocus = useCallback(
-    (e) => {
-      const { target } = e;
-      setSelectionRange(target);
-    },
-    [setSelectionRange]
-  );
-  const handleOtpChange = useCallback(
-    (e, idx) => {
-      const target = e.target;
-      const targetValue = target.value;
-      const isTargetValueDigit = RE_DIGIT.test(targetValue);
-      if (isTargetValueDigit || targetValue === "") {
-        setOtp(targetValue, idx);
-        if (target.value.length > 1) {
-          target.blur();
+    };
+    const setSelectionRange = useCallback((target)=>target.setSelectionRange(0, target.value.length), []);
+    const focusToNextInput = useCallback((target)=>{
+        const nextElement = target.nextElementSibling;
+        if (nextElement) nextElement.focus();
+    }, []);
+    const focusToPrevInput = useCallback((target)=>{
+        const previousElement = target.previousElementSibling;
+        if (previousElement) previousElement.focus();
+    }, []);
+    const handleKeyDown = useCallback((e, idx)=>{
+        const { key } = e;
+        const target = e.target;
+        let targetValue = target.value;
+        setSelectionRange(target);
+        if ('ArrowRight' === key || 'ArrowDown' === key) {
+            e.preventDefault();
+            return focusToNextInput(target);
         }
-        focusToNextInput(target);
-      }
-    },
-    [setOtp, handleKeyDown, handleFocus]
-  );
-  const handlePaste = useCallback(
-    (e) => {
-      e.preventDefault();
-      const pastedData = e.clipboardData.getData("text/plain").replace(REMOVE_SPACES, "");
-      if (pastedData) {
-        setOtp(pastedData, 0);
-      }
-    },
-    []
-  );
-  return {
-    otpValues,
-    handleOtpChange,
-    handleKeyDown,
-    handleFocus,
-    handlePaste
-  };
-}
-const SingleCharacterInputPart = ({ ...props }) => {
-  return /* @__PURE__ */ React.createElement(SingleCharacterInput, { ...props });
-};
-const OtpInput = ({ name, maxLength = 6, ...props }) => {
-  const otp = useOtp(props.onChange, maxLength);
-  return /* @__PURE__ */ React.createElement(SingleCharacterInputs, null, otp.otpValues.map((digit, idx) => /* @__PURE__ */ React.createElement(
-    SingleCharacterInputPart,
-    {
-      name: `${name}-${idx}`,
-      type: "text",
-      key: idx,
-      autoComplete: "one-time-code",
-      pattern: "\\d{1}",
-      maxLength,
-      value: digit,
-      disabled: props.disabled,
-      "aria-required": props["aria-required"],
-      onChange: (e) => otp.handleOtpChange(e, idx),
-      onInput: (e) => {
-        if (e.target.value === digit) {
-          otp.handleOtpChange(e, idx);
+        if ('ArrowLeft' === key || 'ArrowUp' === key) {
+            e.preventDefault();
+            return focusToPrevInput(target);
+        }
+        if ('Backspace' === e.key || 'Delete' === e.key) {
+            if ('' !== targetValue) targetValue = '';
+            else focusToPrevInput(target);
+            setOtp(targetValue, idx);
+            return e.preventDefault();
         }
-      },
-      onKeyDown: (e) => otp.handleKeyDown(e, idx),
-      onFocus: otp.handleFocus,
-      onPaste: otp.handlePaste,
-      error: !digit ? props.error : false
-    }
-  )));
-};
-var OtpInput_default = OtpInput;
-export {
-  OtpInput,
-  REMOVE_SPACES,
-  RE_DIGIT,
-  OtpInput_default as default,
-  useOtp
-};
-//# sourceMappingURL=index.js.map
+    }, [
+        setOtp,
+        focusToPrevInput,
+        focusToNextInput
+    ]);
+    const handleFocus = useCallback((e)=>{
+        const { target } = e;
+        setSelectionRange(target);
+    }, [
+        setSelectionRange
+    ]);
+    const handleOtpChange = useCallback((e, idx)=>{
+        const target = e.target;
+        const targetValue = target.value;
+        const isTargetValueDigit = RE_DIGIT.test(targetValue);
+        if (isTargetValueDigit || '' === targetValue) {
+            setOtp(targetValue, idx);
+            if (target.value.length > 1) target.blur();
+            focusToNextInput(target);
+        }
+    }, [
+        setOtp,
+        handleKeyDown,
+        handleFocus
+    ]);
+    const handlePaste = useCallback((e)=>{
+        e.preventDefault();
+        const pastedData = e.clipboardData.getData('text/plain').replace(REMOVE_SPACES, '');
+        if (pastedData) setOtp(pastedData, 0);
+    }, []);
+    return {
+        otpValues,
+        handleOtpChange,
+        handleKeyDown,
+        handleFocus,
+        handlePaste
+    };
+}
+const SingleCharacterInputPart = /*#__PURE__*/ react.forwardRef(({ ...props }, ref)=>/*#__PURE__*/ react.createElement(SingleCharacterInput, {
+        ...props,
+        ref: ref
+    }));
+SingleCharacterInputPart.displayName = 'SingleCharacterInputPart';
+const OtpInput_OtpInput = /*#__PURE__*/ react.forwardRef(({ name, maxLength = 6, ...props }, ref)=>{
+    const otp = useOtp(props.onChange, maxLength);
+    return /*#__PURE__*/ react.createElement(SingleCharacterInputs, null, otp.otpValues.map((digit, idx)=>/*#__PURE__*/ react.createElement(SingleCharacterInputPart, {
+            ref: 0 === idx ? ref : null,
+            name: `${name}-${idx}`,
+            id: `${name}-${idx}`,
+            type: "text",
+            key: idx,
+            autoComplete: "one-time-code",
+            pattern: "\\d{1}",
+            maxLength: maxLength,
+            value: digit,
+            disabled: props.disabled,
+            "aria-required": props['aria-required'],
+            onChange: (e)=>otp.handleOtpChange(e, idx),
+            onInput: (e)=>{
+                if (e.target.value === digit) otp.handleOtpChange(e, idx);
+            },
+            onKeyDown: (e)=>otp.handleKeyDown(e, idx),
+            onFocus: otp.handleFocus,
+            onPaste: otp.handlePaste,
+            error: digit ? false : props.error
+        })));
+});
+OtpInput_OtpInput.displayName = 'OtpInput';
+const OtpInput = OtpInput_OtpInput;
+export { OtpInput_OtpInput as OtpInput, REMOVE_SPACES, RE_DIGIT, OtpInput as default, useOtp };

package/inputs/Radio/index.d.ts

@@ -1,17 +1,19 @@
 import React from 'react';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import { FieldOptionProps } from '@digigov/form/inputs/Label';
+import type { UseFormReturn } from 'react-hook-form';
+import type { UncontrolledFieldProps } from '../../Field/types.js';
+import type { FieldOptionProps } from '../Label/index.js';
 export interface RadioButtonsGroupProps extends Omit<UncontrolledFieldProps, 'extra'> {
     extra: {
         className?: string;
-        options: Array<FieldOptionProps>;
+        options: FieldOptionProps[];
         dense?: boolean;
     };
     fieldComponent?: React.FC<Omit<UncontrolledFieldProps, 'register'>>;
+    resetField: UseFormReturn['resetField'];
 }
 export declare const RadioButtonsGroup: React.FC<RadioButtonsGroupProps>;
-export declare const ControlledRadioButtonsGroup: React.FC<RadioButtonsGroupProps & {
+export declare const ControlledRadioButtonsGroup: React.ForwardRefExoticComponent<RadioButtonsGroupProps & {
     onChange: (e: any) => void;
     value: any;
-}>;
+} & React.RefAttributes<HTMLInputElement>>;
 export default RadioButtonsGroup;