@hero-design/rn 8.61.3 → 8.62.0

package/.turbo/turbo-build.log

@@ -2,4 +2,4 @@
 src/index.ts → lib/index.js, es/index.js...
 (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-created lib/index.js, es/index.js in 56.1s
+created lib/index.js, es/index.js in 58.2s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.62.0
+
+### Minor Changes
+
+- [#3030](https://github.com/Thinkei/hero-design/pull/3030) [`19693f226`](https://github.com/Thinkei/hero-design/commit/19693f22649c2130d15e1cb8b9c4bd8b47580d80) Thanks [@ttkien](https://github.com/ttkien)! - [Radio] Add extended variant
+
 ## 8.61.3
 
 ### Patch Changes

package/es/index.js

@@ -2782,7 +2782,8 @@ var getListTheme = function getListTheme(theme) {
     listItemContainerPadding: theme.space.medium,
     leadingStatusMarginRight: theme.space.small,
     prefixContainerMarginRight: theme.space.small,
-    suffixContainerMarginLeft: theme.space.small
+    suffixContainerMarginLeft: theme.space.small,
+    childrenContainerTopMargin: theme.space.small
   };
   var radii = {
     item: theme.radii.medium,
@@ -15235,16 +15236,18 @@ var StyledContentContainer = index$9(View)(function () {
     flexGrow: 2
   };
 });
-var StyledChildrenContainer = index$9(View)(function () {
+var StyledChildrenContainer = index$9(View)(function (_ref2) {
+  var theme = _ref2.theme;
   return {
     flexDirection: 'column',
     justifyContent: 'flex-start',
-    alignItems: 'flex-start'
+    alignItems: 'flex-start',
+    marginTop: theme.__hd__.list.space.childrenContainerTopMargin
   };
 });
-var StyledLeadingStatus = index$9(View)(function (_ref2) {
-  var theme = _ref2.theme,
-    themeLeadingStatusIntent = _ref2.themeLeadingStatusIntent;
+var StyledLeadingStatus = index$9(View)(function (_ref3) {
+  var theme = _ref3.theme,
+    themeLeadingStatusIntent = _ref3.themeLeadingStatusIntent;
   return {
     width: theme.__hd__.list.widths.leadingStatus,
     marginRight: theme.__hd__.list.space.leadingStatusMarginRight,
@@ -15252,14 +15255,14 @@ var StyledLeadingStatus = index$9(View)(function (_ref2) {
     backgroundColor: theme.__hd__.list.colors.leadingStatus[themeLeadingStatusIntent]
   };
 });
-var StyledPrefixContainer$1 = index$9(View)(function (_ref3) {
-  var theme = _ref3.theme;
+var StyledPrefixContainer$1 = index$9(View)(function (_ref4) {
+  var theme = _ref4.theme;
   return {
     marginRight: theme.__hd__.list.space.prefixContainerMarginRight
   };
 });
-var StyledSuffixContainer$1 = index$9(View)(function (_ref4) {
-  var theme = _ref4.theme;
+var StyledSuffixContainer$1 = index$9(View)(function (_ref5) {
+  var theme = _ref5.theme;
   return {
     marginLeft: theme.__hd__.list.space.suffixContainerMarginLeft
   };
@@ -16208,7 +16211,8 @@ var Radio = function Radio(_ref2) {
     subText = _ref2.subText,
     testID = _ref2.testID,
     _ref2$inactiveIntent = _ref2.inactiveIntent,
-    inactiveIntent = _ref2$inactiveIntent === void 0 ? 'light' : _ref2$inactiveIntent;
+    inactiveIntent = _ref2$inactiveIntent === void 0 ? 'light' : _ref2$inactiveIntent,
+    children = _ref2.children;
   return /*#__PURE__*/React__default.createElement(StyledRadio, {
     onPress: onPress,
     selected: checked,
@@ -16222,7 +16226,7 @@ var Radio = function Radio(_ref2) {
     testID: testID,
     themeIntent: inactiveIntent,
     themeChecked: checked
-  });
+  }, children);
 };
 
 function getKey(option, index, keyExtractor) {
@@ -16261,7 +16265,7 @@ var RadioGroup = function RadioGroup(_ref) {
         return _onPress(option.value);
       },
       inactiveIntent: inactiveIntent
-    }));
+    }, option.children));
   }));
 };
 

package/lib/index.js

@@ -2812,7 +2812,8 @@ var getListTheme = function getListTheme(theme) {
     listItemContainerPadding: theme.space.medium,
     leadingStatusMarginRight: theme.space.small,
     prefixContainerMarginRight: theme.space.small,
-    suffixContainerMarginLeft: theme.space.small
+    suffixContainerMarginLeft: theme.space.small,
+    childrenContainerTopMargin: theme.space.small
   };
   var radii = {
     item: theme.radii.medium,
@@ -15265,16 +15266,18 @@ var StyledContentContainer = index$9(reactNative.View)(function () {
     flexGrow: 2
   };
 });
-var StyledChildrenContainer = index$9(reactNative.View)(function () {
+var StyledChildrenContainer = index$9(reactNative.View)(function (_ref2) {
+  var theme = _ref2.theme;
   return {
     flexDirection: 'column',
     justifyContent: 'flex-start',
-    alignItems: 'flex-start'
+    alignItems: 'flex-start',
+    marginTop: theme.__hd__.list.space.childrenContainerTopMargin
   };
 });
-var StyledLeadingStatus = index$9(reactNative.View)(function (_ref2) {
-  var theme = _ref2.theme,
-    themeLeadingStatusIntent = _ref2.themeLeadingStatusIntent;
+var StyledLeadingStatus = index$9(reactNative.View)(function (_ref3) {
+  var theme = _ref3.theme,
+    themeLeadingStatusIntent = _ref3.themeLeadingStatusIntent;
   return {
     width: theme.__hd__.list.widths.leadingStatus,
     marginRight: theme.__hd__.list.space.leadingStatusMarginRight,
@@ -15282,14 +15285,14 @@ var StyledLeadingStatus = index$9(reactNative.View)(function (_ref2) {
     backgroundColor: theme.__hd__.list.colors.leadingStatus[themeLeadingStatusIntent]
   };
 });
-var StyledPrefixContainer$1 = index$9(reactNative.View)(function (_ref3) {
-  var theme = _ref3.theme;
+var StyledPrefixContainer$1 = index$9(reactNative.View)(function (_ref4) {
+  var theme = _ref4.theme;
   return {
     marginRight: theme.__hd__.list.space.prefixContainerMarginRight
   };
 });
-var StyledSuffixContainer$1 = index$9(reactNative.View)(function (_ref4) {
-  var theme = _ref4.theme;
+var StyledSuffixContainer$1 = index$9(reactNative.View)(function (_ref5) {
+  var theme = _ref5.theme;
   return {
     marginLeft: theme.__hd__.list.space.suffixContainerMarginLeft
   };
@@ -16238,7 +16241,8 @@ var Radio = function Radio(_ref2) {
     subText = _ref2.subText,
     testID = _ref2.testID,
     _ref2$inactiveIntent = _ref2.inactiveIntent,
-    inactiveIntent = _ref2$inactiveIntent === void 0 ? 'light' : _ref2$inactiveIntent;
+    inactiveIntent = _ref2$inactiveIntent === void 0 ? 'light' : _ref2$inactiveIntent,
+    children = _ref2.children;
   return /*#__PURE__*/React__default["default"].createElement(StyledRadio, {
     onPress: onPress,
     selected: checked,
@@ -16252,7 +16256,7 @@ var Radio = function Radio(_ref2) {
     testID: testID,
     themeIntent: inactiveIntent,
     themeChecked: checked
-  });
+  }, children);
 };
 
 function getKey(option, index, keyExtractor) {
@@ -16291,7 +16295,7 @@ var RadioGroup = function RadioGroup(_ref) {
         return _onPress(option.value);
       },
       inactiveIntent: inactiveIntent
-    }));
+    }, option.children));
   }));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.61.3",
+  "version": "8.62.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/List/StyledListItem.tsx

@@ -46,10 +46,11 @@ const StyledContentContainer = styled(View)(() => ({
   flexGrow: 2,
 }));
 
-const StyledChildrenContainer = styled(View)(() => ({
+const StyledChildrenContainer = styled(View)(({ theme }) => ({
   flexDirection: 'column',
   justifyContent: 'flex-start',
   alignItems: 'flex-start',
+  marginTop: theme.__hd__.list.space.childrenContainerTopMargin,
 }));
 
 const StyledLeadingStatus = styled(View)<{

package/src/components/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -244,6 +244,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
               "alignItems": "flex-start",
               "flexDirection": "column",
               "justifyContent": "flex-start",
+              "marginTop": 8,
             },
             undefined,
           ]

package/src/components/Radio/Radio.tsx

@@ -1,6 +1,6 @@
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle } from 'react-native';
 
 import { Circle, InnerCircle, StyledRadio } from './StyledRadio';
 
@@ -33,6 +33,10 @@ export interface RadioProps {
    * Idle background color of the Radio.
    */
   inactiveIntent?: 'light' | 'dark';
+  /**
+   * Children to be rendered inside the component.
+   */
+  children?: ReactNode;
 }
 
 const RadioCircle = ({
@@ -52,6 +56,7 @@ const Radio = ({
   subText,
   testID,
   inactiveIntent = 'light',
+  children,
 }: RadioProps): ReactElement => (
   <StyledRadio
     onPress={onPress}
@@ -63,7 +68,9 @@ const Radio = ({
     testID={testID}
     themeIntent={inactiveIntent}
     themeChecked={checked}
-  />
+  >
+    {children}
+  </StyledRadio>
 );
 
 export default Radio;

package/src/components/Radio/RadioGroup.tsx

@@ -74,7 +74,9 @@ const RadioGroup = <T,>({
           checked={option.value === value}
           onPress={() => onPress(option.value)}
           inactiveIntent={inactiveIntent}
-        />
+        >
+          {option.children}
+        </Radio>
       </React.Fragment>
     ))}
   </View>

package/src/components/Radio/types.ts

@@ -1,6 +1,9 @@
+import { ReactNode } from 'react';
+
 export type OptionType<T> = {
   value: T;
   text: string;
   subText?: string;
   key?: string;
+  children?: ReactNode;
 };

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -605,6 +605,7 @@ exports[`theme returns correct theme object 1`] = `
         },
       },
       "space": {
+        "childrenContainerTopMargin": 8,
         "leadingStatusMarginRight": 8,
         "listItemContainerPadding": 16,
         "prefixContainerMarginRight": 8,

package/src/theme/components/list.ts

@@ -18,6 +18,7 @@ const getListTheme = (theme: GlobalTheme) => {
     leadingStatusMarginRight: theme.space.small,
     prefixContainerMarginRight: theme.space.small,
     suffixContainerMarginLeft: theme.space.small,
+    childrenContainerTopMargin: theme.space.small,
   };
 
   const radii = {

package/types/components/Radio/Radio.d.ts

@@ -1,5 +1,5 @@
-import type { ReactElement } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { ReactElement, ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
 export interface RadioProps {
     /**
      * Whether the radio is checked.
@@ -29,6 +29,10 @@ export interface RadioProps {
      * Idle background color of the Radio.
      */
     inactiveIntent?: 'light' | 'dark';
+    /**
+     * Children to be rendered inside the component.
+     */
+    children?: ReactNode;
 }
-declare const Radio: ({ text, checked, onPress, style, subText, testID, inactiveIntent, }: RadioProps) => ReactElement;
+declare const Radio: ({ text, checked, onPress, style, subText, testID, inactiveIntent, children, }: RadioProps) => ReactElement;
 export default Radio;

package/types/components/Radio/types.d.ts

@@ -1,6 +1,8 @@
+import { ReactNode } from 'react';
 export declare type OptionType<T> = {
     value: T;
     text: string;
     subText?: string;
     key?: string;
+    children?: ReactNode;
 };

package/types/theme/components/list.d.ts

@@ -16,6 +16,7 @@ declare const getListTheme: (theme: GlobalTheme) => {
         leadingStatusMarginRight: number;
         prefixContainerMarginRight: number;
         suffixContainerMarginLeft: number;
+        childrenContainerTopMargin: number;
     };
     radii: {
         item: number;