@react-native-ohos/native-base 3.4.29-rc.1

package/lib/commonjs/components/primitives/Pressable/Pressable.js

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.useIsPressed = exports.useFocus = exports.useHover = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _utils = require("../../../utils");
+
+var _useHasResponsiveProps = require("../../../hooks/useHasResponsiveProps");
+
+var _styled = require("../../../utils/styled");
+
+var _useThemeProps = require("../../../hooks/useThemeProps");
+
+var _focus = require("@react-native-aria/focus");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const useHover = () => {
+  const [isHovered, setHovered] = _react.default.useState(false);
+
+  return {
+    hoverProps: {
+      onHoverIn: () => setHovered(true),
+      onHoverOut: () => setHovered(false)
+    },
+    isHovered
+  };
+};
+
+exports.useHover = useHover;
+
+const useFocus = () => {
+  const [isFocused, setFocused] = _react.default.useState(false);
+
+  return {
+    focusProps: {
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false)
+    },
+    isFocused
+  };
+};
+
+exports.useFocus = useFocus;
+
+const useIsPressed = () => {
+  const [isPressed, setIsPressed] = _react.default.useState(false);
+
+  return {
+    pressableProps: {
+      onPressIn: () => setIsPressed(true),
+      onPressOut: () => setIsPressed(false)
+    },
+    isPressed
+  };
+};
+
+exports.useIsPressed = useIsPressed;
+const StyledPressable = (0, _styled.makeStyledComponent)(_reactNative.Pressable);
+
+const Pressable = ({
+  children,
+  isDisabled,
+  disabled,
+  isHovered: isHoveredProp,
+  isPressed: isPressedProp,
+  isFocused: isFocusedProp,
+  isFocusVisible: isFocusVisibleProp,
+  ...props
+}, ref) => {
+  const {
+    hoverProps,
+    isHovered
+  } = useHover();
+  const {
+    pressableProps,
+    isPressed
+  } = useIsPressed();
+  const {
+    focusProps,
+    isFocused
+  } = useFocus();
+  const {
+    isFocusVisible,
+    focusProps: focusRingProps
+  } = (0, _focus.useFocusRing)();
+  const stateProps = {
+    isPressed: isPressedProp || isPressed,
+    isFocused: isFocusedProp || isFocused,
+    isHovered: isHoveredProp || isHovered
+  };
+  const {
+    onPressIn,
+    onPressOut,
+    onHoverIn,
+    onHoverOut,
+    onFocus,
+    onBlur,
+    ...resolvedProps
+  } = (0, _useThemeProps.usePropsResolution)('Pressable', props, { ...stateProps,
+    isFocusVisible: isFocusVisibleProp || isFocusVisible,
+    isDisabled: disabled || isDisabled
+  }); // TODO: Replace Render props with Context Hook
+  //TODO: refactor for responsive prop
+
+  if ((0, _useHasResponsiveProps.useHasResponsiveProps)(props)) {
+    return null;
+  } // TODO: Replace Render props with Context Hook
+
+
+  return /*#__PURE__*/_react.default.createElement(StyledPressable, _extends({
+    ref: ref,
+    onPressIn: (0, _utils.composeEventHandlers)(onPressIn, pressableProps.onPressIn),
+    onPressOut: (0, _utils.composeEventHandlers)(onPressOut, pressableProps.onPressOut) // @ts-ignore - web only
+    ,
+    onHoverIn: (0, _utils.composeEventHandlers)(onHoverIn, hoverProps.onHoverIn) // @ts-ignore - web only
+    ,
+    onHoverOut: (0, _utils.composeEventHandlers)(onHoverOut, hoverProps.onHoverOut) // @ts-ignore - web only
+    ,
+    onFocus: (0, _utils.composeEventHandlers)((0, _utils.composeEventHandlers)(onFocus, focusProps.onFocus), focusRingProps.onFocus) // @ts-ignore - web only
+    ,
+    onBlur: (0, _utils.composeEventHandlers)((0, _utils.composeEventHandlers)(onBlur, focusProps.onBlur), focusRingProps.onBlur),
+    disabled: disabled || isDisabled
+  }, resolvedProps), typeof children !== 'function' ? children : children({ ...stateProps
+  }));
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(Pressable));
+
+exports.default = _default;
+//# sourceMappingURL=Pressable.js.map

package/lib/commonjs/components/primitives/Pressable/Pressable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Pressable.tsx"],"names":["useHover","isHovered","setHovered","React","useState","hoverProps","onHoverIn","onHoverOut","useFocus","isFocused","setFocused","focusProps","onFocus","onBlur","useIsPressed","isPressed","setIsPressed","pressableProps","onPressIn","onPressOut","StyledPressable","RNPressable","Pressable","children","isDisabled","disabled","isHoveredProp","isPressedProp","isFocusedProp","isFocusVisible","isFocusVisibleProp","props","ref","focusRingProps","stateProps","resolvedProps"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;AAEO,MAAMA,QAAQ,GAAG,MAAM;AAC5B,QAAM,CAACC,SAAD,EAAYC,UAAZ,IAA0BC,eAAMC,QAAN,CAAe,KAAf,CAAhC;;AACA,SAAO;AACLC,IAAAA,UAAU,EAAE;AACVC,MAAAA,SAAS,EAAE,MAAMJ,UAAU,CAAC,IAAD,CADjB;AAEVK,MAAAA,UAAU,EAAE,MAAML,UAAU,CAAC,KAAD;AAFlB,KADP;AAKLD,IAAAA;AALK,GAAP;AAOD,CATM;;;;AAWA,MAAMO,QAAQ,GAAG,MAAM;AAC5B,QAAM,CAACC,SAAD,EAAYC,UAAZ,IAA0BP,eAAMC,QAAN,CAAe,KAAf,CAAhC;;AACA,SAAO;AACLO,IAAAA,UAAU,EAAE;AACVC,MAAAA,OAAO,EAAE,MAAMF,UAAU,CAAC,IAAD,CADf;AAEVG,MAAAA,MAAM,EAAE,MAAMH,UAAU,CAAC,KAAD;AAFd,KADP;AAKLD,IAAAA;AALK,GAAP;AAOD,CATM;;;;AAWA,MAAMK,YAAY,GAAG,MAAM;AAChC,QAAM,CAACC,SAAD,EAAYC,YAAZ,IAA4Bb,eAAMC,QAAN,CAAe,KAAf,CAAlC;;AACA,SAAO;AACLa,IAAAA,cAAc,EAAE;AACdC,MAAAA,SAAS,EAAE,MAAMF,YAAY,CAAC,IAAD,CADf;AAEdG,MAAAA,UAAU,EAAE,MAAMH,YAAY,CAAC,KAAD;AAFhB,KADX;AAKLD,IAAAA;AALK,GAAP;AAOD,CATM;;;AAWP,MAAMK,eAAe,GAAG,iCAAoBC,sBAApB,CAAxB;;AAEA,MAAMC,SAAS,GAAG,CAChB;AACEC,EAAAA,QADF;AAEEC,EAAAA,UAFF;AAGEC,EAAAA,QAHF;AAIExB,EAAAA,SAAS,EAAEyB,aAJb;AAKEX,EAAAA,SAAS,EAAEY,aALb;AAMElB,EAAAA,SAAS,EAAEmB,aANb;AAOEC,EAAAA,cAAc,EAAEC,kBAPlB;AAQE,KAAGC;AARL,CADgB,EAWhBC,GAXgB,KAYb;AACH,QAAM;AAAE3B,IAAAA,UAAF;AAAcJ,IAAAA;AAAd,MAA4BD,QAAQ,EAA1C;AACA,QAAM;AAAEiB,IAAAA,cAAF;AAAkBF,IAAAA;AAAlB,MAAgCD,YAAY,EAAlD;AACA,QAAM;AAAEH,IAAAA,UAAF;AAAcF,IAAAA;AAAd,MAA4BD,QAAQ,EAA1C;AACA,QAAM;AAAEqB,IAAAA,cAAF;AAAkBlB,IAAAA,UAAU,EAAEsB;AAA9B,MAAsD,0BAA5D;AAEA,QAAMC,UAAU,GAAG;AACjBnB,IAAAA,SAAS,EAAEY,aAAa,IAAIZ,SADX;AAEjBN,IAAAA,SAAS,EAAEmB,aAAa,IAAInB,SAFX;AAGjBR,IAAAA,SAAS,EAAEyB,aAAa,IAAIzB;AAHX,GAAnB;AAMA,QAAM;AACJiB,IAAAA,SADI;AAEJC,IAAAA,UAFI;AAGJb,IAAAA,SAHI;AAIJC,IAAAA,UAJI;AAKJK,IAAAA,OALI;AAMJC,IAAAA,MANI;AAOJ,OAAGsB;AAPC,MAQF,uCAAmB,WAAnB,EAAgCJ,KAAhC,EAAuC,EACzC,GAAGG,UADsC;AAEzCL,IAAAA,cAAc,EAAEC,kBAAkB,IAAID,cAFG;AAGzCL,IAAAA,UAAU,EAAEC,QAAQ,IAAID;AAHiB,GAAvC,CARJ,CAZG,CA0BH;AAEA;;AACA,MAAI,kDAAsBO,KAAtB,CAAJ,EAAkC;AAChC,WAAO,IAAP;AACD,GA/BE,CAiCH;;;AACA,sBACE,6BAAC,eAAD;AACE,IAAA,GAAG,EAAEC,GADP;AAEE,IAAA,SAAS,EAAE,iCAAqBd,SAArB,EAAgCD,cAAc,CAACC,SAA/C,CAFb;AAGE,IAAA,UAAU,EAAE,iCAAqBC,UAArB,EAAiCF,cAAc,CAACE,UAAhD,CAHd,CAIE;AAJF;AAKE,IAAA,SAAS,EAAE,iCAAqBb,SAArB,EAAgCD,UAAU,CAACC,SAA3C,CALb,CAME;AANF;AAOE,IAAA,UAAU,EAAE,iCAAqBC,UAArB,EAAiCF,UAAU,CAACE,UAA5C,CAPd,CAQE;AARF;AASE,IAAA,OAAO,EAAE,iCACP,iCAAqBK,OAArB,EAA8BD,UAAU,CAACC,OAAzC,CADO,EAEPqB,cAAc,CAACrB,OAFR,CATX,CAaE;AAbF;AAcE,IAAA,MAAM,EAAE,iCACN,iCAAqBC,MAArB,EAA6BF,UAAU,CAACE,MAAxC,CADM,EAENoB,cAAc,CAACpB,MAFT,CAdV;AAkBE,IAAA,QAAQ,EAAEY,QAAQ,IAAID;AAlBxB,KAmBMW,aAnBN,GAqBG,OAAOZ,QAAP,KAAoB,UAApB,GAAiCA,QAAjC,GAA4CA,QAAQ,CAAC,EAAE,GAAGW;AAAL,GAAD,CArBvD,CADF;AAyBD,CAvED;;4BAyEe,+BAAK,uBAAWZ,SAAX,CAAL,C","sourcesContent":["import React, { forwardRef, memo } from 'react';\r\nimport { Pressable as RNPressable } from 'react-native';\r\nimport { composeEventHandlers } from '../../../utils';\r\nimport type { IPressableProps } from './types';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\nimport { makeStyledComponent } from '../../../utils/styled';\r\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\r\nimport { useFocusRing } from '@react-native-aria/focus';\r\n\r\nexport const useHover = () => {\r\n  const [isHovered, setHovered] = React.useState(false);\r\n  return {\r\n    hoverProps: {\r\n      onHoverIn: () => setHovered(true),\r\n      onHoverOut: () => setHovered(false),\r\n    },\r\n    isHovered,\r\n  };\r\n};\r\n\r\nexport const useFocus = () => {\r\n  const [isFocused, setFocused] = React.useState(false);\r\n  return {\r\n    focusProps: {\r\n      onFocus: () => setFocused(true),\r\n      onBlur: () => setFocused(false),\r\n    },\r\n    isFocused,\r\n  };\r\n};\r\n\r\nexport const useIsPressed = () => {\r\n  const [isPressed, setIsPressed] = React.useState(false);\r\n  return {\r\n    pressableProps: {\r\n      onPressIn: () => setIsPressed(true),\r\n      onPressOut: () => setIsPressed(false),\r\n    },\r\n    isPressed,\r\n  };\r\n};\r\n\r\nconst StyledPressable = makeStyledComponent(RNPressable);\r\n\r\nconst Pressable = (\r\n  {\r\n    children,\r\n    isDisabled,\r\n    disabled,\r\n    isHovered: isHoveredProp,\r\n    isPressed: isPressedProp,\r\n    isFocused: isFocusedProp,\r\n    isFocusVisible: isFocusVisibleProp,\r\n    ...props\r\n  }: IPressableProps,\r\n  ref: any\r\n) => {\r\n  const { hoverProps, isHovered } = useHover();\r\n  const { pressableProps, isPressed } = useIsPressed();\r\n  const { focusProps, isFocused } = useFocus();\r\n  const { isFocusVisible, focusProps: focusRingProps }: any = useFocusRing();\r\n\r\n  const stateProps = {\r\n    isPressed: isPressedProp || isPressed,\r\n    isFocused: isFocusedProp || isFocused,\r\n    isHovered: isHoveredProp || isHovered,\r\n  };\r\n\r\n  const {\r\n    onPressIn,\r\n    onPressOut,\r\n    onHoverIn,\r\n    onHoverOut,\r\n    onFocus,\r\n    onBlur,\r\n    ...resolvedProps\r\n  } = usePropsResolution('Pressable', props, {\r\n    ...stateProps,\r\n    isFocusVisible: isFocusVisibleProp || isFocusVisible,\r\n    isDisabled: disabled || isDisabled,\r\n  });\r\n\r\n  // TODO: Replace Render props with Context Hook\r\n\r\n  //TODO: refactor for responsive prop\r\n  if (useHasResponsiveProps(props)) {\r\n    return null;\r\n  }\r\n\r\n  // TODO: Replace Render props with Context Hook\r\n  return (\r\n    <StyledPressable\r\n      ref={ref}\r\n      onPressIn={composeEventHandlers(onPressIn, pressableProps.onPressIn)}\r\n      onPressOut={composeEventHandlers(onPressOut, pressableProps.onPressOut)}\r\n      // @ts-ignore - web only\r\n      onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}\r\n      // @ts-ignore - web only\r\n      onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}\r\n      // @ts-ignore - web only\r\n      onFocus={composeEventHandlers(\r\n        composeEventHandlers(onFocus, focusProps.onFocus),\r\n        focusRingProps.onFocus\r\n      )}\r\n      // @ts-ignore - web only\r\n      onBlur={composeEventHandlers(\r\n        composeEventHandlers(onBlur, focusProps.onBlur),\r\n        focusRingProps.onBlur\r\n      )}\r\n      disabled={disabled || isDisabled}\r\n      {...resolvedProps}\r\n    >\r\n      {typeof children !== 'function' ? children : children({ ...stateProps })}\r\n    </StyledPressable>\r\n  );\r\n};\r\n\r\nexport default memo(forwardRef(Pressable));\r\n"]}

package/lib/commonjs/components/primitives/Pressable/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Pressable", {
+  enumerable: true,
+  get: function () {
+    return _Pressable.default;
+  }
+});
+Object.defineProperty(exports, "useFocus", {
+  enumerable: true,
+  get: function () {
+    return _Pressable.useFocus;
+  }
+});
+Object.defineProperty(exports, "useHover", {
+  enumerable: true,
+  get: function () {
+    return _Pressable.useHover;
+  }
+});
+Object.defineProperty(exports, "useIsPressed", {
+  enumerable: true,
+  get: function () {
+    return _Pressable.useIsPressed;
+  }
+});
+
+var _Pressable = _interopRequireWildcard(require("./Pressable"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/primitives/Pressable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as Pressable } from './Pressable';\r\nexport type { IPressableProps } from './types';\r\nexport { useFocus, useHover, useIsPressed } from './Pressable';\r\n"]}

package/lib/commonjs/components/primitives/Pressable/types.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.js.map

package/lib/commonjs/components/primitives/Pressable/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/lib/commonjs/components/primitives/Radio/Radio.js

@@ -0,0 +1,195 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _stableHash = _interopRequireDefault(require("stable-hash"));
+
+var _Pressable = require("../Pressable");
+
+var _Center = require("../../composites/Center");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Stack = require("../Stack");
+
+var _useThemeProps = require("../../../hooks/useThemeProps");
+
+var _wrapStringChild = require("../../../utils/wrapStringChild");
+
+var _radio = require("@react-native-aria/radio");
+
+var _RadioGroup = require("./RadioGroup");
+
+var _utils = require("../../../utils");
+
+var _Icons = require("../Icon/Icons");
+
+var _useHasResponsiveProps = require("../../../hooks/useHasResponsiveProps");
+
+var _utils2 = require("../../../theme/tools/utils");
+
+var _Pressable2 = require("../../primitives/Pressable/Pressable");
+
+var _FormControl = require("../../composites/FormControl");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const RadioComponent = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(({
+  icon,
+  inputProps,
+  combinedProps,
+  size,
+  children,
+  wrapperRef,
+  isHovered: isHoveredProp,
+  isPressed: isPressedProp,
+  isFocused: isFocusedProp
+}, ref) => {
+  const {
+    isInvalid,
+    isReadOnly,
+    isIndeterminate
+  } = combinedProps;
+  const {
+    hoverProps,
+    isHovered
+  } = (0, _Pressable2.useHover)();
+  const {
+    pressableProps,
+    isPressed
+  } = (0, _Pressable2.useIsPressed)();
+  const {
+    focusProps,
+    isFocused
+  } = (0, _Pressable2.useFocus)();
+  const {
+    disabled: isDisabled,
+    checked: isChecked
+  } = inputProps;
+  const {
+    onPressIn,
+    onPressOut,
+    onHoverIn,
+    onHoverOut,
+    onFocus,
+    onBlur,
+    _interactionBox,
+    _icon,
+    _stack,
+    _text,
+    ...resolvedProps
+  } = (0, _useThemeProps.usePropsResolution)('Radio', { ...combinedProps,
+    size
+  }, {
+    isInvalid,
+    isReadOnly,
+    isDisabled,
+    isIndeterminate,
+    isChecked,
+    isHovered: isHoveredProp || isHovered,
+    isPressed: isPressedProp || isPressed,
+    isFocused: isFocusedProp || isFocused
+  });
+  const [, cleanInputProps] = (0, _utils2.extractInObject)(inputProps, [..._utils2.stylingProps.margin, ..._utils2.stylingProps.layout, ..._utils2.stylingProps.flexbox, ..._utils2.stylingProps.position, ..._utils2.stylingProps.background, ..._utils2.stylingProps.padding, ..._utils2.stylingProps.border, '_text']); // only calling below function when icon exist.
+
+  const sizedIcon = () =>
+  /*#__PURE__*/
+  //@ts-ignore
+  _react.default.cloneElement(icon, { ..._icon
+  });
+
+  return /*#__PURE__*/_react.default.createElement(_Pressable.Pressable, _extends({
+    disabled: isDisabled
+  }, pressableProps, cleanInputProps, {
+    ref: (0, _utils.mergeRefs)([ref, wrapperRef]),
+    accessibilityRole: "radio",
+    onPressIn: (0, _utils.composeEventHandlers)(onPressIn, pressableProps.onPressIn),
+    onPressOut: (0, _utils.composeEventHandlers)(onPressOut, pressableProps.onPressOut) // @ts-ignore - web only
+    ,
+    onHoverIn: (0, _utils.composeEventHandlers)(onHoverIn, hoverProps.onHoverIn) // @ts-ignore - web only
+    ,
+    onHoverOut: (0, _utils.composeEventHandlers)(onHoverOut, hoverProps.onHoverOut) // @ts-ignore - web only
+    ,
+    onFocus: (0, _utils.composeEventHandlers)((0, _utils.composeEventHandlers)(onFocus, focusProps.onFocus) // focusRingProps.onFocu
+    ) // @ts-ignore - web only
+    ,
+    onBlur: (0, _utils.composeEventHandlers)((0, _utils.composeEventHandlers)(onBlur, focusProps.onBlur) // focusRingProps.onBlur
+    )
+  }), /*#__PURE__*/_react.default.createElement(_Stack.Stack, _stack, /*#__PURE__*/_react.default.createElement(_Center.Center, null, /*#__PURE__*/_react.default.createElement(_Box.default, _interactionBox), /*#__PURE__*/_react.default.createElement(_Center.Center, resolvedProps, icon && sizedIcon && isChecked ? sizedIcon() : /*#__PURE__*/_react.default.createElement(_Icons.CircleIcon, _extends({}, _icon, {
+    opacity: isChecked ? 1 : 0
+  })))), (0, _wrapStringChild.wrapStringChild)(children, _text)));
+}));
+
+const Radio = ({
+  icon,
+  children,
+  size,
+  wrapperRef,
+  isHovered: isHoveredProp,
+  isPressed: isPressedProp,
+  isFocused: isFocusedProp,
+  ...props
+}, ref) => {
+  var _contextState$state;
+
+  const formControlContext = (0, _FormControl.useFormControlContext)();
+
+  const contextState = _react.default.useContext(_RadioGroup.RadioContext);
+
+  const combinedProps = (0, _utils.combineContextAndProps)({ ...formControlContext,
+    ...contextState
+  }, props);
+
+  const inputRef = _react.default.useRef(null);
+
+  const radioState = (0, _radio.useRadio)({ ...combinedProps,
+    'aria-label': props.accessibilityLabel,
+    children
+  }, (_contextState$state = contextState.state) !== null && _contextState$state !== void 0 ? _contextState$state : {}, inputRef); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  const inputProps = _react.default.useMemo(() => radioState.inputProps, [radioState.inputProps.checked, radioState.inputProps.disabled]);
+
+  const contextCombinedProps = _react.default.useMemo(() => {
+    return { ...combinedProps
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [(0, _stableHash.default)(combinedProps)]); //TODO: refactor for responsive prop
+
+
+  if ((0, _useHasResponsiveProps.useHasResponsiveProps)(props)) {
+    return null;
+  }
+
+  if ((0, _utils.isEmptyObj)(contextState)) {
+    console.error('Error: Radio must be wrapped inside a Radio.Group');
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(RadioComponent, {
+    inputProps: inputProps,
+    combinedProps: contextCombinedProps,
+    children: children,
+    size: size,
+    ref: ref,
+    icon: icon,
+    wrapperRef: wrapperRef,
+    isHovered: isHoveredProp,
+    isPressed: isPressedProp,
+    isFocused: isFocusedProp
+  });
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(Radio));
+
+exports.default = _default;
+//# sourceMappingURL=Radio.js.map

package/lib/commonjs/components/primitives/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Radio.tsx"],"names":["RadioComponent","icon","inputProps","combinedProps","size","children","wrapperRef","isHovered","isHoveredProp","isPressed","isPressedProp","isFocused","isFocusedProp","ref","isInvalid","isReadOnly","isIndeterminate","hoverProps","pressableProps","focusProps","disabled","isDisabled","checked","isChecked","onPressIn","onPressOut","onHoverIn","onHoverOut","onFocus","onBlur","_interactionBox","_icon","_stack","_text","resolvedProps","cleanInputProps","stylingProps","margin","layout","flexbox","position","background","padding","border","sizedIcon","React","cloneElement","Radio","props","formControlContext","contextState","useContext","RadioContext","inputRef","useRef","radioState","accessibilityLabel","state","useMemo","contextCombinedProps","console","error"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAMA;;AACA;;AAKA;;;;;;;;;;AAEA,MAAMA,cAAc,gBAAG,+BACrB,uBACE,CACE;AACEC,EAAAA,IADF;AAEEC,EAAAA,UAFF;AAGEC,EAAAA,aAHF;AAIEC,EAAAA,IAJF;AAKEC,EAAAA,QALF;AAMEC,EAAAA,UANF;AAOEC,EAAAA,SAAS,EAAEC,aAPb;AAQEC,EAAAA,SAAS,EAAEC,aARb;AASEC,EAAAA,SAAS,EAAEC;AATb,CADF,EAYEC,GAZF,KAaK;AACH,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,UAAb;AAAyBC,IAAAA;AAAzB,MAA6Cb,aAAnD;AACA,QAAM;AAAEc,IAAAA,UAAF;AAAcV,IAAAA;AAAd,MAA4B,2BAAlC;AACA,QAAM;AAAEW,IAAAA,cAAF;AAAkBT,IAAAA;AAAlB,MAAgC,+BAAtC;AACA,QAAM;AAAEU,IAAAA,UAAF;AAAcR,IAAAA;AAAd,MAA4B,2BAAlC;AAEA,QAAM;AAAES,IAAAA,QAAQ,EAAEC,UAAZ;AAAwBC,IAAAA,OAAO,EAAEC;AAAjC,MAA+CrB,UAArD;AAEA,QAAM;AACJsB,IAAAA,SADI;AAEJC,IAAAA,UAFI;AAGJC,IAAAA,SAHI;AAIJC,IAAAA,UAJI;AAKJC,IAAAA,OALI;AAMJC,IAAAA,MANI;AAOJC,IAAAA,eAPI;AAQJC,IAAAA,KARI;AASJC,IAAAA,MATI;AAUJC,IAAAA,KAVI;AAWJ,OAAGC;AAXC,MAYF,uCACF,OADE,EAEF,EACE,GAAG/B,aADL;AAEEC,IAAAA;AAFF,GAFE,EAMF;AACEU,IAAAA,SADF;AAEEC,IAAAA,UAFF;AAGEM,IAAAA,UAHF;AAIEL,IAAAA,eAJF;AAKEO,IAAAA,SALF;AAMEhB,IAAAA,SAAS,EAAEC,aAAa,IAAID,SAN9B;AAOEE,IAAAA,SAAS,EAAEC,aAAa,IAAID,SAP9B;AAQEE,IAAAA,SAAS,EAAEC,aAAa,IAAID;AAR9B,GANE,CAZJ;AA8BA,QAAM,GAAGwB,eAAH,IAAsB,6BAAgBjC,UAAhB,EAA4B,CACtD,GAAGkC,qBAAaC,MADsC,EAEtD,GAAGD,qBAAaE,MAFsC,EAGtD,GAAGF,qBAAaG,OAHsC,EAItD,GAAGH,qBAAaI,QAJsC,EAKtD,GAAGJ,qBAAaK,UALsC,EAMtD,GAAGL,qBAAaM,OANsC,EAOtD,GAAGN,qBAAaO,MAPsC,EAQtD,OARsD,CAA5B,CAA5B,CAtCG,CAiDH;;AACA,QAAMC,SAAS,GAAG;AAAA;AAChB;AACAC,iBAAMC,YAAN,CAAmB7C,IAAnB,EAAyB,EACvB,GAAG8B;AADoB,GAAzB,CAFF;;AAMA,sBACE,6BAAC,oBAAD;AACE,IAAA,QAAQ,EAAEV;AADZ,KAEMH,cAFN,EAGOiB,eAHP;AAIE,IAAA,GAAG,EAAE,sBAAU,CAACtB,GAAD,EAAMP,UAAN,CAAV,CAJP;AAKE,IAAA,iBAAiB,EAAC,OALpB;AAME,IAAA,SAAS,EAAE,iCAAqBkB,SAArB,EAAgCN,cAAc,CAACM,SAA/C,CANb;AAOE,IAAA,UAAU,EAAE,iCACVC,UADU,EAEVP,cAAc,CAACO,UAFL,CAPd,CAWE;AAXF;AAYE,IAAA,SAAS,EAAE,iCAAqBC,SAArB,EAAgCT,UAAU,CAACS,SAA3C,CAZb,CAaE;AAbF;AAcE,IAAA,UAAU,EAAE,iCAAqBC,UAArB,EAAiCV,UAAU,CAACU,UAA5C,CAdd,CAeE;AAfF;AAgBE,IAAA,OAAO,EAAE,iCACP,iCAAqBC,OAArB,EAA8BT,UAAU,CAACS,OAAzC,CADO,CAEP;AAFO,KAhBX,CAoBE;AApBF;AAqBE,IAAA,MAAM,EAAE,iCACN,iCAAqBC,MAArB,EAA6BV,UAAU,CAACU,MAAxC,CADM,CAEN;AAFM;AArBV,mBA0BE,6BAAC,YAAD,EAAWG,MAAX,eACE,6BAAC,cAAD,qBAEE,6BAAC,YAAD,EAASF,eAAT,CAFF,eAIE,6BAAC,cAAD,EAAYI,aAAZ,EACGjC,IAAI,IAAI2C,SAAR,IAAqBrB,SAArB,GACCqB,SAAS,EADV,gBAGC,6BAAC,iBAAD,eAAgBb,KAAhB;AAAuB,IAAA,OAAO,EAAER,SAAS,GAAG,CAAH,GAAO;AAAhD,KAJJ,CAJF,CADF,EAcG,sCAAgBlB,QAAhB,EAA0B4B,KAA1B,CAdH,CA1BF,CADF;AA6CD,CAnHH,CADqB,CAAvB;;AAwHA,MAAMc,KAAK,GAAG,CACZ;AACE9C,EAAAA,IADF;AAEEI,EAAAA,QAFF;AAGED,EAAAA,IAHF;AAIEE,EAAAA,UAJF;AAKEC,EAAAA,SAAS,EAAEC,aALb;AAMEC,EAAAA,SAAS,EAAEC,aANb;AAOEC,EAAAA,SAAS,EAAEC,aAPb;AAQE,KAAGoC;AARL,CADY,EAWZnC,GAXY,KAYT;AAAA;;AACH,QAAMoC,kBAAkB,GAAG,yCAA3B;;AACA,QAAMC,YAAY,GAAGL,eAAMM,UAAN,CAAiBC,wBAAjB,CAArB;;AACA,QAAMjD,aAAa,GAAG,mCACpB,EAAE,GAAG8C,kBAAL;AAAyB,OAAGC;AAA5B,GADoB,EAEpBF,KAFoB,CAAtB;;AAIA,QAAMK,QAAQ,GAAGR,eAAMS,MAAN,CAAa,IAAb,CAAjB;;AACA,QAAMC,UAAU,GAAG,qBACjB,EAAE,GAAGpD,aAAL;AAAoB,kBAAc6C,KAAK,CAACQ,kBAAxC;AAA4DnD,IAAAA;AAA5D,GADiB,yBAEjB6C,YAAY,CAACO,KAFI,qEAEK,EAFL,EAGjBJ,QAHiB,CAAnB,CARG,CAcH;;AACA,QAAMnD,UAAU,GAAG2C,eAAMa,OAAN,CAAc,MAAMH,UAAU,CAACrD,UAA/B,EAA2C,CAC5DqD,UAAU,CAACrD,UAAX,CAAsBoB,OADsC,EAE5DiC,UAAU,CAACrD,UAAX,CAAsBkB,QAFsC,CAA3C,CAAnB;;AAKA,QAAMuC,oBAAoB,GAAGd,eAAMa,OAAN,CAAc,MAAM;AAC/C,WAAO,EAAE,GAAGvD;AAAL,KAAP,CAD+C,CAE/C;AACD,GAH4B,EAG1B,CAAC,yBAAWA,aAAX,CAAD,CAH0B,CAA7B,CApBG,CAyBH;;;AACA,MAAI,kDAAsB6C,KAAtB,CAAJ,EAAkC;AAChC,WAAO,IAAP;AACD;;AACD,MAAI,uBAAWE,YAAX,CAAJ,EAA8B;AAC5BU,IAAAA,OAAO,CAACC,KAAR,CAAc,mDAAd;AACA,wBAAO,2DAAP;AACD;;AAED,sBACE,6BAAC,cAAD;AACE,IAAA,UAAU,EAAE3D,UADd;AAEE,IAAA,aAAa,EAAEyD,oBAFjB;AAGE,IAAA,QAAQ,EAAEtD,QAHZ;AAIE,IAAA,IAAI,EAAED,IAJR;AAKE,IAAA,GAAG,EAAES,GALP;AAME,IAAA,IAAI,EAAEZ,IANR;AAOE,IAAA,UAAU,EAAEK,UAPd;AAQE,IAAA,SAAS,EAAEE,aARb;AASE,IAAA,SAAS,EAAEE,aATb;AAUE,IAAA,SAAS,EAAEE;AAVb,IADF;AAcD,CA5DD;;4BA8De,+BAAK,uBAAWmC,KAAX,CAAL,C","sourcesContent":["import React, { memo, forwardRef } from 'react';\r\n//@ts-ignore\r\nimport stableHash from 'stable-hash';\r\nimport { Pressable, IPressableProps } from '../Pressable';\r\nimport { Center } from '../../composites/Center';\r\nimport Box from '../Box';\r\nimport { Stack } from '../Stack';\r\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\r\nimport { wrapStringChild } from '../../../utils/wrapStringChild';\r\nimport type { IRadioProps } from './types';\r\nimport { useRadio } from '@react-native-aria/radio';\r\nimport { RadioContext } from './RadioGroup';\r\nimport { mergeRefs } from '../../../utils';\r\nimport { CircleIcon } from '../Icon/Icons';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\nimport {\r\n  composeEventHandlers,\r\n  combineContextAndProps,\r\n  isEmptyObj,\r\n} from '../../../utils';\r\nimport { extractInObject, stylingProps } from '../../../theme/tools/utils';\r\nimport {\r\n  useHover,\r\n  useFocus,\r\n  useIsPressed,\r\n} from '../../primitives/Pressable/Pressable';\r\nimport { useFormControlContext } from '../../composites/FormControl';\r\n\r\nconst RadioComponent = memo(\r\n  forwardRef(\r\n    (\r\n      {\r\n        icon,\r\n        inputProps,\r\n        combinedProps,\r\n        size,\r\n        children,\r\n        wrapperRef,\r\n        isHovered: isHoveredProp,\r\n        isPressed: isPressedProp,\r\n        isFocused: isFocusedProp,\r\n      }: any,\r\n      ref: any\r\n    ) => {\r\n      const { isInvalid, isReadOnly, isIndeterminate } = combinedProps;\r\n      const { hoverProps, isHovered } = useHover();\r\n      const { pressableProps, isPressed } = useIsPressed();\r\n      const { focusProps, isFocused } = useFocus();\r\n\r\n      const { disabled: isDisabled, checked: isChecked } = inputProps;\r\n\r\n      const {\r\n        onPressIn,\r\n        onPressOut,\r\n        onHoverIn,\r\n        onHoverOut,\r\n        onFocus,\r\n        onBlur,\r\n        _interactionBox,\r\n        _icon,\r\n        _stack,\r\n        _text,\r\n        ...resolvedProps\r\n      } = usePropsResolution(\r\n        'Radio',\r\n        {\r\n          ...combinedProps,\r\n          size,\r\n        },\r\n        {\r\n          isInvalid,\r\n          isReadOnly,\r\n          isDisabled,\r\n          isIndeterminate,\r\n          isChecked,\r\n          isHovered: isHoveredProp || isHovered,\r\n          isPressed: isPressedProp || isPressed,\r\n          isFocused: isFocusedProp || isFocused,\r\n        }\r\n      );\r\n\r\n      const [, cleanInputProps] = extractInObject(inputProps, [\r\n        ...stylingProps.margin,\r\n        ...stylingProps.layout,\r\n        ...stylingProps.flexbox,\r\n        ...stylingProps.position,\r\n        ...stylingProps.background,\r\n        ...stylingProps.padding,\r\n        ...stylingProps.border,\r\n        '_text',\r\n      ]);\r\n\r\n      // only calling below function when icon exist.\r\n      const sizedIcon = () =>\r\n        //@ts-ignore\r\n        React.cloneElement(icon, {\r\n          ..._icon,\r\n        });\r\n\r\n      return (\r\n        <Pressable\r\n          disabled={isDisabled}\r\n          {...pressableProps}\r\n          {...(cleanInputProps as IPressableProps)}\r\n          ref={mergeRefs([ref, wrapperRef])}\r\n          accessibilityRole=\"radio\"\r\n          onPressIn={composeEventHandlers(onPressIn, pressableProps.onPressIn)}\r\n          onPressOut={composeEventHandlers(\r\n            onPressOut,\r\n            pressableProps.onPressOut\r\n          )}\r\n          // @ts-ignore - web only\r\n          onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}\r\n          // @ts-ignore - web only\r\n          onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}\r\n          // @ts-ignore - web only\r\n          onFocus={composeEventHandlers(\r\n            composeEventHandlers(onFocus, focusProps.onFocus)\r\n            // focusRingProps.onFocu\r\n          )}\r\n          // @ts-ignore - web only\r\n          onBlur={composeEventHandlers(\r\n            composeEventHandlers(onBlur, focusProps.onBlur)\r\n            // focusRingProps.onBlur\r\n          )}\r\n        >\r\n          <Stack {..._stack}>\r\n            <Center>\r\n              {/* Interaction Wrapper */}\r\n              <Box {..._interactionBox} />\r\n              {/* radio */}\r\n              <Center {...resolvedProps}>\r\n                {icon && sizedIcon && isChecked ? (\r\n                  sizedIcon()\r\n                ) : (\r\n                  <CircleIcon {..._icon} opacity={isChecked ? 1 : 0} />\r\n                )}\r\n              </Center>\r\n            </Center>\r\n            {/* Label */}\r\n            {wrapStringChild(children, _text)}\r\n          </Stack>\r\n        </Pressable>\r\n      );\r\n    }\r\n  )\r\n);\r\n\r\nconst Radio = (\r\n  {\r\n    icon,\r\n    children,\r\n    size,\r\n    wrapperRef,\r\n    isHovered: isHoveredProp,\r\n    isPressed: isPressedProp,\r\n    isFocused: isFocusedProp,\r\n    ...props\r\n  }: IRadioProps,\r\n  ref: any\r\n) => {\r\n  const formControlContext = useFormControlContext();\r\n  const contextState = React.useContext(RadioContext);\r\n  const combinedProps = combineContextAndProps(\r\n    { ...formControlContext, ...contextState },\r\n    props\r\n  );\r\n  const inputRef = React.useRef(null);\r\n  const radioState = useRadio(\r\n    { ...combinedProps, 'aria-label': props.accessibilityLabel, children },\r\n    contextState.state ?? {},\r\n    inputRef\r\n  );\r\n\r\n  // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  const inputProps = React.useMemo(() => radioState.inputProps, [\r\n    radioState.inputProps.checked,\r\n    radioState.inputProps.disabled,\r\n  ]);\r\n\r\n  const contextCombinedProps = React.useMemo(() => {\r\n    return { ...combinedProps };\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [stableHash(combinedProps)]);\r\n\r\n  //TODO: refactor for responsive prop\r\n  if (useHasResponsiveProps(props)) {\r\n    return null;\r\n  }\r\n  if (isEmptyObj(contextState)) {\r\n    console.error('Error: Radio must be wrapped inside a Radio.Group');\r\n    return <></>;\r\n  }\r\n\r\n  return (\r\n    <RadioComponent\r\n      inputProps={inputProps}\r\n      combinedProps={contextCombinedProps}\r\n      children={children}\r\n      size={size}\r\n      ref={ref}\r\n      icon={icon}\r\n      wrapperRef={wrapperRef}\r\n      isHovered={isHoveredProp}\r\n      isPressed={isPressedProp}\r\n      isFocused={isFocusedProp}\r\n    />\r\n  );\r\n};\r\n\r\nexport default memo(forwardRef(Radio));\r\n"]}

package/lib/commonjs/components/primitives/Radio/Radio.web.js

@@ -0,0 +1,212 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _stableHash = _interopRequireDefault(require("stable-hash"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Stack = require("../Stack");
+
+var _Center = require("../../composites/Center");
+
+var _useThemeProps = require("../../../hooks/useThemeProps");
+
+var _wrapStringChild = require("../../../utils/wrapStringChild");
+
+var _utils = require("./../../../utils");
+
+var _interactions = require("@react-native-aria/interactions");
+
+var _radio = require("@react-native-aria/radio");
+
+var _visuallyHidden = require("@react-aria/visually-hidden");
+
+var _RadioGroup = require("./RadioGroup");
+
+var _focus = require("@react-native-aria/focus");
+
+var _Icons = require("../Icon/Icons");
+
+var _useHasResponsiveProps = require("../../../hooks/useHasResponsiveProps");
+
+var _utils2 = require("../../../utils");
+
+var _FormControl = require("../../composites/FormControl");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const RadioComponent = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(({
+  icon,
+  inputProps,
+  combinedProps,
+  children,
+  wrapperRef,
+  isHovered: isHoveredProp,
+  isPressed: isPressedProp,
+  isFocused: isFocusedProp,
+  isFocusVisible: isFocusVisibleProp,
+  ...props
+}, ref) => {
+  const {
+    isInvalid,
+    isReadOnly,
+    isIndeterminate
+  } = combinedProps;
+  const {
+    disabled: isDisabled,
+    checked: isChecked
+  } = inputProps;
+
+  const _ref = _react.default.useRef(null);
+
+  const {
+    isHovered
+  } = (0, _interactions.useHover)({}, _ref);
+  const mergedRefs = (0, _utils.mergeRefs)([_ref, wrapperRef]);
+  const {
+    focusProps,
+    isFocusVisible
+  } = (0, _focus.useFocusRing)();
+
+  const [isFocused, setFocused] = _react.default.useState(isFocusedProp);
+
+  const [isPressed, setPressed] = _react.default.useState(isPressedProp);
+
+  const handleFocus = () => {
+    setFocused(true);
+  };
+
+  const handleBlur = () => {
+    isFocusedProp ? setFocused(true) : setFocused(false);
+  };
+
+  const handlePressIn = () => {
+    setPressed(true);
+  };
+
+  const handlePressOut = () => {
+    isPressedProp ? setPressed(true) : setPressed(false);
+  };
+
+  const {
+    _interactionBox,
+    _icon,
+    _stack,
+    _text,
+    ...resolvedProps
+  } = (0, _useThemeProps.usePropsResolution)('Radio', combinedProps, {
+    isInvalid,
+    isReadOnly,
+    isFocusVisible: isFocusVisibleProp || isFocused || isFocusVisible,
+    isDisabled,
+    isIndeterminate,
+    isChecked,
+    isHovered: isHoveredProp || isHovered,
+    isPressed,
+    isFocused
+  }); // only calling below function when icon exist.
+
+  const sizedIcon = () =>
+  /*#__PURE__*/
+  //@ts-ignore
+  _react.default.cloneElement(icon, { ..._icon
+  });
+
+  const component = /*#__PURE__*/_react.default.createElement(_Stack.Stack, _stack, /*#__PURE__*/_react.default.createElement(_Center.Center, null, /*#__PURE__*/_react.default.createElement(_Box.default, _interactionBox), /*#__PURE__*/_react.default.createElement(_Center.Center, resolvedProps, icon && sizedIcon && isChecked ? sizedIcon() : /*#__PURE__*/_react.default.createElement(_Icons.CircleIcon, _extends({}, _icon, {
+    opacity: isChecked ? 1 : 0
+  })))), (0, _wrapStringChild.wrapStringChild)(children, _text)); //TODO: refactor for responsive prop
+
+
+  if ((0, _useHasResponsiveProps.useHasResponsiveProps)(props)) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Box.default // @ts-ignore - RN web supports accessibilityRole="label"
+  , {
+    accessibilityRole: "label",
+    ref: mergedRefs
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    onMouseDown: handlePressIn,
+    onMouseUp: handlePressOut
+  }, /*#__PURE__*/_react.default.createElement(_visuallyHidden.VisuallyHidden, null, /*#__PURE__*/_react.default.createElement("input", _extends({}, inputProps, focusProps, {
+    ref: ref,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }))), component));
+}));
+
+const Radio = ({
+  icon,
+  children,
+  wrapperRef,
+  isHovered: isHoveredProp,
+  isPressed,
+  isFocused: isFocusedProp,
+  isFocusVisible: isFocusVisibleProp,
+  ...props
+}, ref) => {
+  var _contextState$state;
+
+  const formControlContext = (0, _FormControl.useFormControlContext)();
+
+  const contextState = _react.default.useContext(_RadioGroup.RadioContext);
+
+  const combinedProps = (0, _utils2.combineContextAndProps)({ ...formControlContext,
+    ...contextState
+  }, props);
+
+  const inputRef = _react.default.useRef(null);
+
+  const radioState = (0, _radio.useRadio)({ ...combinedProps,
+    'aria-label': props.accessibilityLabel,
+    children
+  }, (_contextState$state = contextState.state) !== null && _contextState$state !== void 0 ? _contextState$state : {}, inputRef); //@ts-ignore
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  const inputProps = _react.default.useMemo(() => radioState.inputProps, [radioState.inputProps.checked, radioState.inputProps.disabled]);
+
+  const contextCombinedProps = _react.default.useMemo(() => {
+    return { ...combinedProps
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [(0, _stableHash.default)(combinedProps)]); //TODO: refactor for responsive prop
+
+
+  if ((0, _useHasResponsiveProps.useHasResponsiveProps)(props)) {
+    return null;
+  }
+
+  if ((0, _utils2.isEmptyObj)(contextState)) {
+    console.error('Error: Radio must be wrapped inside a Radio.Group');
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(RadioComponent, {
+    inputProps: inputProps,
+    combinedProps: contextCombinedProps,
+    children: children,
+    ref: ref,
+    icon: icon,
+    wrapperRef: wrapperRef,
+    isHovered: isHoveredProp,
+    isPressed: isPressed,
+    isFocused: isFocusedProp,
+    isFocusVisible: isFocusVisibleProp
+  });
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(Radio));
+
+exports.default = _default;
+//# sourceMappingURL=Radio.web.js.map