@hero-design/rn 8.59.0 → 8.60.1-alpha.0

package/src/components/Radio/types.ts

@@ -1 +1,6 @@
-export type OptionType<T> = { value: T; text: string; key?: string };
+export type OptionType<T> = {
+  value: T;
+  text: string;
+  subText?: string;
+  key?: string;
+};

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

@@ -712,7 +712,12 @@ exports[`theme returns correct theme object 1`] = `
         "circle": 2,
       },
       "colors": {
-        "circle": "#001f23",
+        "checked": "#ece8ef",
+        "circle": "#401960",
+        "intents": {
+          "dark": "#f6f6f7",
+          "light": "#ffffff",
+        },
       },
       "sizes": {
         "circle": 20,
@@ -720,7 +725,8 @@ exports[`theme returns correct theme object 1`] = `
       },
       "space": {
         "circleLeftMargin": 8,
-        "groupTopMargin": 4,
+        "groupTopMarginMedium": 16,
+        "groupTopMarginSmall": 4,
       },
     },
     "rate": {

package/src/theme/components/radio.ts

@@ -2,12 +2,18 @@ import type { GlobalTheme } from '../global';
 
 const getRadioTheme = (theme: GlobalTheme) => {
   const colors = {
-    circle: theme.colors.onDefaultGlobalSurface,
+    circle: theme.colors.primary,
+    checked: theme.colors.highlightedSurface,
+    intents: {
+      light: theme.colors.defaultGlobalSurface,
+      dark: theme.colors.neutralGlobalSurface,
+    },
   };
 
   const space = {
     circleLeftMargin: theme.space.small,
-    groupTopMargin: theme.space.xsmall,
+    groupTopMarginSmall: theme.space.xsmall,
+    groupTopMarginMedium: theme.space.medium,
   };
 
   const boundingBoxSize = theme.sizes.large;

package/types/components/AnimatedScroller/AnimatedFAB.d.ts

@@ -5,6 +5,8 @@ import { FABProps } from '../FAB/FAB';
 interface AnimatedFABProps {
     fabProps: FABProps | ActionGroupProps;
     contentOffsetY: Animated.Value;
+    contentHeight: Animated.Value;
+    layoutHeight: Animated.Value;
 }
-declare const AnimatedFAB: ({ fabProps, contentOffsetY }: AnimatedFABProps) => React.JSX.Element;
+declare const AnimatedFAB: ({ fabProps, contentOffsetY, contentHeight, layoutHeight, }: AnimatedFABProps) => React.JSX.Element;
 export default AnimatedFAB;

package/types/components/AnimatedScroller/AnimatedScrollable.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FlatListProps, ScrollViewProps as RnScrollViewProps, SectionListProps } from 'react-native';
-import { FABProps } from '../FAB/FAB';
 import { ActionGroupProps } from '../FAB/ActionGroup';
+import { FABProps } from '../FAB/FAB';
 export interface AnimatedScrollerProps<T> {
     /**
      * Scroll component, it can be ScrollView, FlatList or SectionList.

package/types/components/FAB/StyledFAB.d.ts

@@ -1,15 +1,13 @@
 /// <reference types="react" />
-import type { TextProps, TouchableHighlightProps } from 'react-native';
-import { TouchableHighlight } from 'react-native';
+import type { TextProps } from 'react-native';
+import { Animated, TouchableHighlight } from 'react-native';
 import type { IconProps } from '../Icon';
-declare const StyledFAB: import("@emotion/native").StyledComponent<TouchableHighlightProps & {
+declare const StyledFAB: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").TouchableHighlightProps & import("react").RefAttributes<TouchableHighlight>> & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeActive?: boolean | undefined;
-}, {}, {
-    ref?: import("react").Ref<TouchableHighlight> | undefined;
-}>;
+}, {}, {}>;
 declare const StyledFABIcon: import("@emotion/native").StyledComponent<IconProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

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

@@ -17,10 +17,18 @@ export interface RadioProps {
      * Additional style.
      */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Radio subtext.
+     */
+    subText?: string;
     /**
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Idle background color of the Radio.
+     */
+    inactiveIntent?: 'light' | 'dark';
 }
-declare const Radio: ({ text, checked, onPress, style, testID, }: RadioProps) => ReactElement;
+declare const Radio: ({ text, checked, onPress, style, subText, testID, inactiveIntent, }: RadioProps) => ReactElement;
 export default Radio;

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

@@ -27,6 +27,10 @@ export interface RadioGroupProps<T> {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Idle background color of the Radio.
+     */
+    inactiveIntent?: 'light' | 'dark';
 }
-declare const RadioGroup: <T>({ value, onPress, options, keyExtractor, style, testID, }: RadioGroupProps<T>) => ReactElement;
+declare const RadioGroup: <T>({ value, onPress, options, keyExtractor, style, testID, inactiveIntent, }: RadioGroupProps<T>) => ReactElement;
 export default RadioGroup;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { View } from 'react-native';
+declare type RadioIntent = 'light' | 'dark';
 declare const Circle: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -15,7 +16,16 @@ declare const InnerCircle: import("@emotion/native").StyledComponent<import("rea
 declare const Spacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeIntent: RadioIntent;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { Circle, InnerCircle, Spacer };
+declare const StyledRadio: import("@emotion/native").StyledComponent<import("../List/ListItem").ListItemProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeIntent: RadioIntent;
+    themeChecked: boolean;
+}, {}, {}>;
+export { Circle, InnerCircle, Spacer, StyledRadio };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 declare const CompoundRadio: {
-    readonly Group: <T>({ value, onPress, options, keyExtractor, style, testID, }: import("./RadioGroup").RadioGroupProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly Group: <T>({ value, onPress, options, keyExtractor, style, testID, inactiveIntent, }: import("./RadioGroup").RadioGroupProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 };
 export default CompoundRadio;

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

@@ -1,5 +1,6 @@
 export declare type OptionType<T> = {
     value: T;
     text: string;
+    subText?: string;
     key?: string;
 };

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

@@ -9,10 +9,16 @@ declare const getRadioTheme: (theme: GlobalTheme) => {
     };
     space: {
         circleLeftMargin: number;
-        groupTopMargin: number;
+        groupTopMarginSmall: number;
+        groupTopMarginMedium: number;
     };
     colors: {
         circle: string;
+        checked: string;
+        intents: {
+            light: string;
+            dark: string;
+        };
     };
 };
 export default getRadioTheme;