@digigov/form 2.0.0-8de46296 → 2.0.0-96651090

package/inputs/Input/index.js

@@ -1,69 +1,69 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "control", "type", "extra"];
-import React from 'react';
-import { useWatch } from 'react-hook-form';
-import { Hint } from '@digigov/react-core';
-import TextArea from '@digigov/react-core/TextArea';
-import TextInput from '@digigov/react-core/TextInput';
-import { useTranslation } from '@digigov/ui/i18n';
-var TYPES_MAP = {
-  string: 'text',
-  "int": 'text',
-  text: 'text',
-  date: 'date'
+import react from "react";
+import { useWatch } from "react-hook-form";
+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',
+    password: 'password',
+    int: 'text',
+    rate: 'number',
+    text: 'text',
+    date: 'date'
 };
-export var Input = /*#__PURE__*/React.forwardRef(function WrappedInput(_ref, ref) {
-  var name = _ref.name,
-    control = _ref.control,
-    type = _ref.type,
-    extra = _ref.extra,
-    props = _objectWithoutProperties(_ref, _excluded);
-  // eslint-disable-next-line prefer-const
-  var _ref2 = extra || {},
-    _ref2$multiline = _ref2.multiline,
-    multiline = _ref2$multiline === void 0 ? false : _ref2$multiline,
-    rows = _ref2.rows,
-    limit = _ref2.limit;
-  var _ref3 = extra || {},
-    className = _ref3.className;
-  // if enforced to multiline use true. Derive from type otherwise.
-  multiline = multiline === true || type === 'text';
-  // use explicit rows value if set. Derive from multiline otherwise.
-  rows = rows || (multiline ? 4 : 1);
-  // translate dilosi type to HTML Input type
-  var fieldType = TYPES_MAP[type || 'text'] || 'text';
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var currentValue = useWatch({
-    control: control,
-    name: name
-  });
-  if (multiline === true) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextArea, _extends({
-      name: name,
-      className: className,
-      rows: rows,
-      ref: ref
-    }, _extends({}, props, {
-      reset: undefined,
-      required: undefined,
-      type: fieldType
-    }))), (limit === null || limit === void 0 ? void 0 : limit.max) && /*#__PURE__*/React.createElement(Hint, null, currentValue === undefined || (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) >= 0 && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) <= (limit === null || limit === void 0 ? void 0 : limit.max) ? /*#__PURE__*/React.createElement("span", null, t('form.info.text.you_have'), ' ', /*#__PURE__*/React.createElement("b", null, !currentValue ? limit.max : (limit === null || limit === void 0 ? void 0 : limit.max) - (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length)), ' ', currentValue && (limit === null || limit === void 0 ? void 0 : limit.max) - (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) === 1 ? "".concat(t('form.info.text.character')) : "".concat(t('form.info.text.characters')), ' ', t('form.info.text.remaining'), ".") : /*#__PURE__*/React.createElement("span", {
-      style: {
-        color: '#b60202'
-      }
-    }, t('form.info.text.you_have'), ' ', /*#__PURE__*/React.createElement("b", null, currentValue && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) - (limit === null || limit === void 0 ? void 0 : limit.max)), ' ', (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) - (limit === null || limit === void 0 ? void 0 : limit.max) === 1 ? "".concat(t('form.info.text.character')) : "".concat(t('form.info.text.characters')), ' ', t('form.info.text.too_many'), ".")));
-  } else {
-    return /*#__PURE__*/React.createElement(TextInput, _extends({
-      name: name,
-      type: fieldType,
-      className: className,
-      ref: ref
-    }, _extends({}, props, {
-      reset: undefined,
-      required: undefined
-    })));
-  }
+const Input = /*#__PURE__*/ react.forwardRef(function({ name, control, type, extra, ...props }, ref) {
+    let { multiline = false, rows, limit } = extra || {};
+    const { className } = extra || {};
+    multiline = true === multiline || 'text' === type;
+    rows = rows || (multiline ? 4 : 1);
+    const fieldType = TYPES_MAP[type || 'text'] || 'text';
+    const { t } = useTranslation();
+    const currentValue = useWatch({
+        control,
+        name
+    });
+    const getRemainingChars = (currentValue, limit)=>{
+        if (currentValue) return limit?.max - currentValue.length;
+        return limit?.max;
+    };
+    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;
+    };
+    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
+    });
 });
-export default Input;
+const inputs_Input = Input;
+export { Input, inputs_Input as default };

package/inputs/Label/index.d.ts

@@ -1,18 +1,16 @@
 import React from 'react';
-import { FieldLabelProps } from '@digigov/form/types';
+import type { FieldLabelProps } from '../../types.js';
 export interface FieldOptionProps {
     label?: FieldLabelProps;
     value: string;
     show?: string[];
     disabled?: boolean;
-    selected?: () => React.FC;
+    selected?: () => React.ReactNode;
     divider?: string;
 }
 export interface LabelProps {
     primary?: string;
     secondary?: string;
-}
-export interface LabelProps {
     className?: string;
     value?: string;
     label?: FieldLabelProps;

package/inputs/Label/index.js

@@ -1,22 +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';
-export var Label = function Label(_ref) {
-  var className = _ref.className,
-    label = _ref.label,
-    value = _ref.value;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  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)));
+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)));
 };
-Label.defaultProps = {
-  label: {}
-};
-export default Label;
+const Label = Label_Label;
+export { Label_Label as Label, Label as default };

package/inputs/OtpInput/index.d.ts

@@ -1,9 +1,12 @@
-/// <reference types="react" />
+import React from 'react';
 export declare const RE_DIGIT: RegExp;
 export declare const REMOVE_SPACES: RegExp;
-export declare const OtpInput: ({ name, maxLength, ...props }: {
-    [x: string]: any;
-    name: any;
-    maxLength?: number | undefined;
-}) => JSX.Element;
+export declare function useOtp(onChange: any, maxLength: any): {
+    otpValues: string[];
+    handleOtpChange: (e: React.ChangeEvent<HTMLInputElement>, idx: number) => void;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>, idx: number) => void;
+    handleFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handlePaste: (e: React.ClipboardEvent<HTMLInputElement>) => void;
+};
+export declare const OtpInput: React.ForwardRefExoticComponent<Omit<Record<string, any>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default OtpInput;

package/inputs/OtpInput/index.js

@@ -1,140 +1,123 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
-import _extends from "@babel/runtime/helpers/extends";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["name", "maxLength"];
-import React, { useState, useCallback } from 'react';
-import SingleCharacterInputs, { SingleCharacterInput } from '@digigov/ui/form/SingleCharacterInputs';
-export var RE_DIGIT = new RegExp(/^\d+$/);
-export var REMOVE_SPACES = new RegExp(/\s+/g);
+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) {
-  var _useState = useState(Array(maxLength).fill('')),
-    _useState2 = _slicedToArray(_useState, 2),
-    otpValues = _useState2[0],
-    setOtpValues = _useState2[1];
-  var handleChange = useCallback(function (otp) {
-    setOtpValues(otp);
-    var otpValue = otp.join('');
-    onChange(otpValue);
-  }, [onChange]);
-  var setOtp = function setOtp(item, idx) {
-    var updatedOTPValues = _toConsumableArray(otpValues);
-    if (item.length === 1 || item.length === 0) {
-      updatedOTPValues[idx] = item[0] || '';
-      handleChange(updatedOTPValues);
-    } else if (item.length === maxLength) {
-      var valueArray = item.split('').slice(0, maxLength);
-      handleChange(valueArray);
-    }
-  };
-  var setSelectionRange = useCallback(function (target) {
-    return target.setSelectionRange(0, target.value.length);
-  }, []);
-  var focusToNextInput = useCallback(function (target) {
-    var nextElement = target.nextElementSibling;
-    if (nextElement) {
-      nextElement.focus();
-    }
-  }, []);
-  var focusToPrevInput = useCallback(function (target) {
-    var previousElement = target.previousElementSibling;
-    if (previousElement) {
-      previousElement.focus();
-    }
-  }, []);
-  var handleKeyDown = useCallback(function (e, idx) {
-    var key = e.key;
-    var target = e.target;
-    var 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);
-      }
-      setOtp(targetValue, idx);
-      return e.preventDefault();
-    }
-  }, [setOtp, focusToPrevInput, focusToNextInput]);
-  var handleFocus = useCallback(function (e) {
-    var target = e.target;
-    setSelectionRange(target);
-  }, [setSelectionRange]);
-  var handleOtpChange = useCallback(function (e, idx) {
-    var target = e.target;
-    var targetValue = target.value;
-    var isTargetValueDigit = RE_DIGIT.test(targetValue);
-    // We want to pass the empty string when the value is deleted
-    // emptry string replaces the deleted value
-    if (isTargetValueDigit || targetValue === '') {
-      setOtp(targetValue, idx);
-      if (target.value.length > 1) {
-        target.blur();
-      }
-      focusToNextInput(target);
-    }
-  }, [setOtp, handleKeyDown, handleFocus]);
-  var handlePaste = useCallback(function (e) {
-    e.preventDefault();
-    var pastedData = e.clipboardData.getData('text/plain').replace(REMOVE_SPACES, '');
-    if (pastedData) {
-      setOtp(pastedData, 0);
-    }
-  }, []);
-  return {
-    otpValues: otpValues,
-    handleOtpChange: handleOtpChange,
-    handleKeyDown: handleKeyDown,
-    handleFocus: handleFocus,
-    handlePaste: handlePaste
-  };
-}
-var SingleCharacterInputPart = function SingleCharacterInputPart(_ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(SingleCharacterInput, props);
-};
-export var OtpInput = function OtpInput(_ref2) {
-  var name = _ref2.name,
-    _ref2$maxLength = _ref2.maxLength,
-    maxLength = _ref2$maxLength === void 0 ? 6 : _ref2$maxLength,
-    props = _objectWithoutProperties(_ref2, _excluded);
-  var otp = useOtp(props.onChange, maxLength);
-  return /*#__PURE__*/React.createElement(SingleCharacterInputs, null, otp.otpValues.map(function (digit, idx) {
-    return /*#__PURE__*/React.createElement(SingleCharacterInputPart, {
-      name: "".concat(name, "-").concat(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: function onChange(e) {
-        return otp.handleOtpChange(e, idx);
-      },
-      onInput: function onInput(e) {
-        if (e.target.value === digit) {
-          otp.handleOtpChange(e, idx);
+    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);
+        }
+    };
+    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);
+        }
+        if ('ArrowLeft' === key || 'ArrowUp' === key) {
+            e.preventDefault();
+            return focusToPrevInput(target);
         }
-      },
-      onKeyDown: function onKeyDown(e) {
-        return otp.handleKeyDown(e, idx);
-      },
-      onFocus: otp.handleFocus,
-      onPaste: otp.handlePaste,
-      error: !digit ? props.error : false
-    });
-  }));
-};
-export default OtpInput;
+        if ('Backspace' === e.key || 'Delete' === e.key) {
+            if ('' !== targetValue) targetValue = '';
+            else focusToPrevInput(target);
+            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();
+            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,12 +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.ForwardRefExoticComponent<RadioButtonsGroupProps & {
+    onChange: (e: any) => void;
+    value: any;
+} & React.RefAttributes<HTMLInputElement>>;
 export default RadioButtonsGroup;

package/inputs/Radio/index.js

@@ -1,57 +1,73 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "control", "register", "extra", "disabled"],
-  _excluded2 = ["label", "value", "show", "disabled", "selected"];
-import React from 'react';
-import { useWatch } from 'react-hook-form';
-import { Field } from '@digigov/form';
-import { RadioConditional } from '@digigov/react-core';
-import Hint from '@digigov/react-core/Hint';
-import RadioContainer from '@digigov/react-core/RadioContainer';
-import RadioItem from '@digigov/react-core/RadioItem';
-import { useTranslation } from '@digigov/ui/i18n';
-export var RadioButtonsGroup = function RadioButtonsGroup(_ref) {
-  var name = _ref.name,
-    control = _ref.control,
-    register = _ref.register,
-    _ref$extra = _ref.extra,
-    options = _ref$extra.options,
-    className = _ref$extra.className,
-    disabled = _ref.disabled,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var currentValue = useWatch({
-    control: control,
-    name: name
-  });
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React.createElement(RadioContainer, {
-    className: className,
-    defaultValue: currentValue,
-    id: name
-  }, options.map(function (_ref2) {
-    var label = _ref2.label,
-      v = _ref2.value,
-      show = _ref2.show,
-      optionDisabled = _ref2.disabled,
-      selected = _ref2.selected,
-      option = _objectWithoutProperties(_ref2, _excluded2);
-    return /*#__PURE__*/React.createElement("div", {
-      key: "".concat(name, ".").concat(v)
-    }, /*#__PURE__*/React.createElement(RadioItem, _extends({}, register(name), {
-      value: v,
-      disabled: disabled || optionDisabled
-    }, option, _extends({}, props, {
-      reset: undefined,
-      required: undefined,
-      'aria-describedby': undefined,
-      type: 'radio'
-    })), label && label.primary && t(label.primary) || v, label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(label.secondary))), selected && selected(), currentValue === v && show && /*#__PURE__*/React.createElement(RadioConditional, null, show.map(function (fieldName) {
-      return /*#__PURE__*/React.createElement(Field, {
-        name: fieldName,
-        key: fieldName
-      });
-    })));
-  }));
+import react from "react";
+import { useWatch } from "react-hook-form";
+import { omit } from "../../utils.js";
+import { RadioConditional, RadioContainer, RadioItem } from "@digigov/ui/form/RadioContainer/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+import { Hint } from "@digigov/ui/typography/Hint/index.js";
+import { Base } from "@digigov/ui/utils/Base/index.js";
+const RadioButtonsGroup = ({ name, control, register, extra: { options, className }, disabled, Field, ...props })=>{
+    const currentValue = useWatch({
+        control,
+        name
+    });
+    const { t } = useTranslation();
+    return /*#__PURE__*/ react.createElement(RadioContainer, {
+        className: className,
+        id: name
+    }, options.map(({ label, value: v, show, disabled: optionDisabled, selected, ...option })=>/*#__PURE__*/ react.createElement(Base, {
+            as: "div",
+            key: `${name}.${v}`
+        }, /*#__PURE__*/ react.createElement(RadioItem, {
+            ...register(name),
+            id: `${name}.${v}`,
+            value: v,
+            disabled: disabled || optionDisabled,
+            ...option,
+            ...omit(props, [
+                'resetField'
+            ]),
+            reset: void 0,
+            required: void 0,
+            error: void 0,
+            'aria-describedby': void 0,
+            type: 'radio'
+        }, label && label.primary && /*#__PURE__*/ react.createElement(Base, {
+            as: "span"
+        }, t(label.primary) || v), label && label.secondary && /*#__PURE__*/ react.createElement(Hint, null, t(label.secondary))), selected && selected(), currentValue === v && show && Field && /*#__PURE__*/ react.createElement(RadioConditional, null, show.map((fieldName)=>/*#__PURE__*/ react.createElement(Field, {
+                name: fieldName,
+                key: fieldName
+            }))))));
 };
-export default RadioButtonsGroup;
+const Radio_ControlledRadioButtonsGroup = /*#__PURE__*/ react.forwardRef(function({ name, extra: { options, className }, disabled, onChange, value, Field, ...props }, ref) {
+    const currentValue = value;
+    const { t } = useTranslation();
+    return /*#__PURE__*/ react.createElement(RadioContainer, {
+        className: className,
+        id: name
+    }, options.map(({ label, value: v, show, disabled: optionDisabled, selected, ...option }, index)=>/*#__PURE__*/ react.createElement(react.Fragment, {
+            key: `${name}.${v}`
+        }, /*#__PURE__*/ react.createElement(RadioItem, {
+            ref: 0 === index ? ref : void 0,
+            onChange: (e)=>{
+                console.log(e);
+                onChange(e);
+            },
+            id: `${name}.${v}`,
+            value: v,
+            checked: currentValue === v,
+            disabled: disabled || optionDisabled,
+            ...option,
+            ...props,
+            reset: void 0,
+            required: void 0,
+            error: void 0,
+            Field: void 0,
+            'aria-describedby': void 0,
+            type: 'radio'
+        }, label && label.primary && t(label.primary) || v, label && label.secondary && /*#__PURE__*/ react.createElement(Hint, null, t(label.secondary))), selected && selected(), currentValue === v && show && /*#__PURE__*/ react.createElement(RadioConditional, null, show.map((fieldName)=>/*#__PURE__*/ react.createElement(Field, {
+                name: fieldName,
+                key: fieldName
+            }))))));
+});
+const Radio = RadioButtonsGroup;
+export { Radio_ControlledRadioButtonsGroup as ControlledRadioButtonsGroup, RadioButtonsGroup, Radio as default };