@aws-amplify/ui-react-native 1.0.0 → 1.1.0

package/dist/primitives/Heading/styles.js

@@ -1,14 +1,47 @@
 import { StyleSheet } from 'react-native';
 import { getLineHeight } from '../../utils';
-export const styles = StyleSheet.create({
-    text: {
-        color: 'black',
-    },
-    // these values are completely arbitrary for now
-    1: { fontSize: 56, fontWeight: '100', lineHeight: getLineHeight(56) },
-    2: { fontSize: 44, fontWeight: '200', lineHeight: getLineHeight(44) },
-    3: { fontSize: 34, fontWeight: '300', lineHeight: getLineHeight(34) },
-    4: { fontSize: 26, fontWeight: '500', lineHeight: getLineHeight(26) },
-    5: { fontSize: 20, fontWeight: '700', lineHeight: getLineHeight(20) },
-    6: { fontSize: 16, fontWeight: '900', lineHeight: getLineHeight(16) },
-});
+export const getThemedStyles = (theme) => {
+    const { components, tokens: { colors, fontSizes, fontWeights }, } = theme;
+    return StyleSheet.create({
+        text: {
+            color: colors.font.primary,
+            ...components?.heading?.text,
+        },
+        1: {
+            fontSize: fontSizes.xxxl,
+            fontWeight: fontWeights.hairline,
+            lineHeight: getLineHeight(fontSizes.xxxl),
+            ...components?.heading?.[1],
+        },
+        2: {
+            fontSize: fontSizes.xxl,
+            fontWeight: fontWeights.thin,
+            lineHeight: getLineHeight(fontSizes.xxl),
+            ...components?.heading?.[2],
+        },
+        3: {
+            fontSize: fontSizes.xl,
+            fontWeight: fontWeights.light,
+            lineHeight: getLineHeight(fontSizes.xl),
+            ...components?.heading?.[3],
+        },
+        4: {
+            fontSize: fontSizes.large,
+            fontWeight: fontWeights.medium,
+            lineHeight: getLineHeight(fontSizes.large),
+            ...components?.heading?.[4],
+        },
+        5: {
+            fontSize: fontSizes.medium,
+            fontWeight: fontWeights.bold,
+            lineHeight: getLineHeight(fontSizes.medium),
+            ...components?.heading?.[5],
+        },
+        6: {
+            fontSize: fontSizes.small,
+            fontWeight: fontWeights.black,
+            lineHeight: getLineHeight(fontSizes.small),
+            ...components?.heading?.[6],
+        },
+    });
+};

package/dist/primitives/Heading/types.d.ts

@@ -4,7 +4,7 @@ export interface HeadingProps extends TextProps {
     level?: Level;
 }
 export declare type HeadingStyles = {
-    text: TextStyle;
+    text?: TextStyle;
 } & {
     [key in Level]: TextStyle;
 };

package/dist/primitives/Icon/Icon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconProps } from './types';
-export default function Icon({ animated, color, size, style, ...rest }: IconProps): JSX.Element;
+export default function Icon({ accessibilityRole, animated, color, size, style, ...rest }: IconProps): JSX.Element;

package/dist/primitives/Icon/Icon.js

@@ -1,10 +1,17 @@
 import React, { useMemo } from 'react';
 import { Animated, Image } from 'react-native';
-import { getStyles } from './styles';
-export default function Icon({ animated, color, size, style, ...rest }) {
-    const { icon } = useMemo(() => getStyles(color, size), [color, size]);
+import { useTheme } from '../../theme';
+import { getThemedStyles } from './styles';
+export default function Icon({ accessibilityRole = 'image', animated, color, size, style, ...rest }) {
+    const theme = useTheme();
+    const themedStyle = useMemo(() => getThemedStyles(theme, color, size), [theme, color, size]);
+    const imageProps = {
+        ...rest,
+        accessibilityRole,
+        style: [themedStyle.icon, style],
+    };
     if (animated) {
-        return <Animated.Image {...rest} style={[icon, style]}/>;
+        return <Animated.Image {...imageProps}/>;
     }
-    return <Image {...rest} style={[icon, style]}/>;
+    return <Image {...imageProps}/>;
 }

package/dist/primitives/Icon/constants.d.ts

@@ -0,0 +1,2 @@
+import { IconSizes } from './types';
+export declare const iconSizes: IconSizes;

package/dist/primitives/Icon/constants.js

@@ -0,0 +1,7 @@
+export const iconSizes = {
+    xs: 16,
+    small: 20,
+    medium: 24,
+    large: 32,
+    xl: 48,
+};

package/dist/primitives/Icon/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Icon } from './Icon';
-export { IconProps } from './types';
+export { IconProps, IconStyles, IconSizes } from './types';
+export { iconSizes } from './constants';

package/dist/primitives/Icon/index.js

@@ -1 +1,2 @@
 export { default as Icon } from './Icon';
+export { iconSizes } from './constants';

package/dist/primitives/Icon/styles.d.ts

@@ -1,2 +1,3 @@
+import { StrictTheme } from '../../theme';
 import { IconProps, IconStyles } from './types';
-export declare const getStyles: (color: IconProps['color'], size: IconProps['size']) => IconStyles;
+export declare const getThemedStyles: (theme: StrictTheme, color?: IconProps['color'], size?: IconProps['size']) => Required<IconStyles>;

package/dist/primitives/Icon/styles.js

@@ -1,9 +1,30 @@
 import { StyleSheet } from 'react-native';
-export const getStyles = (color, size) => StyleSheet.create({
-    icon: {
-        height: size,
-        resizeMode: 'contain',
-        tintColor: color,
-        width: size,
-    },
-});
+import { ConsoleLogger as Logger } from '@aws-amplify/core';
+import { iconSizes } from './constants';
+const logger = new Logger('Icon-logger');
+const getIconSize = (size) => {
+    if (!size) {
+        return iconSizes.medium;
+    }
+    if (typeof size === 'number') {
+        return size;
+    }
+    if (!iconSizes[size]) {
+        logger.warn(`"${size}" is not a valid icon size. Available values are: ${Object.keys(iconSizes)}`);
+        return iconSizes.medium;
+    }
+    return iconSizes[size];
+};
+export const getThemedStyles = (theme, color, size) => {
+    const { components } = theme;
+    const iconSize = getIconSize(size);
+    return StyleSheet.create({
+        icon: {
+            height: iconSize,
+            resizeMode: 'contain',
+            tintColor: color,
+            width: iconSize,
+            ...components?.icon,
+        },
+    });
+};

package/dist/primitives/Icon/types.d.ts

@@ -1,6 +1,8 @@
 import { ColorValue, ImageProps, ImageStyle } from 'react-native';
+export declare type Size = 'xs' | 'small' | 'medium' | 'large' | 'xl';
+export declare type IconSizes = Record<Size, number>;
 export interface IconStyles {
-    icon: ImageStyle;
+    icon?: ImageStyle;
 }
 export interface IconProps extends ImageProps {
     /**
@@ -14,5 +16,5 @@ export interface IconProps extends ImageProps {
     /**
      * Icon size
      */
-    size?: number;
+    size?: Size | number;
 }

package/dist/primitives/IconButton/IconButton.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconButtonProps } from './types';
-export default function IconButton({ color, iconStyle, source, size, ...rest }: IconButtonProps): JSX.Element;
+export default function IconButton({ accessibilityRole, color, disabled, iconStyle, size, source, style, ...rest }: IconButtonProps): JSX.Element;

package/dist/primitives/IconButton/IconButton.js

@@ -1,8 +1,21 @@
-import React from 'react';
-import { Pressable } from 'react-native';
-import { Icon } from '../Icon';
-export default function IconButton({ color, iconStyle, source, size = 16, ...rest }) {
-    return (<Pressable {...rest}>
+import React, { useCallback } from 'react';
+import { Pressable, } from 'react-native';
+import { useTheme } from '../../theme';
+import { getThemedStyles } from './styles';
+import { Icon, iconSizes } from '../Icon';
+export default function IconButton({ accessibilityRole = 'button', color, disabled, iconStyle, size = iconSizes.medium, source, style, ...rest }) {
+    const theme = useTheme();
+    const themedStyle = getThemedStyles(theme);
+    const pressableStyle = useCallback(({ pressed }) => {
+        const pressedStateStyle = typeof style === 'function' ? style({ pressed }) : style;
+        return [
+            themedStyle.container,
+            disabled ? themedStyle.disabled : null,
+            pressed ? themedStyle.pressed : null,
+            pressedStateStyle,
+        ];
+    }, [disabled, style, themedStyle]);
+    return (<Pressable {...rest} accessibilityRole={accessibilityRole} disabled={disabled} style={pressableStyle}>
       <Icon color={color} size={size} source={source} style={iconStyle}/>
     </Pressable>);
 }

package/dist/primitives/IconButton/styles.d.ts

@@ -0,0 +1,3 @@
+import { StrictTheme } from '../../theme';
+import { IconButtonStyles } from './types';
+export declare const getThemedStyles: (theme: StrictTheme) => IconButtonStyles;

package/dist/primitives/IconButton/styles.js

@@ -1 +1,17 @@
-"use strict";
+import { StyleSheet } from 'react-native';
+export const getThemedStyles = (theme) => {
+    const { components, tokens: { opacities }, } = theme;
+    return StyleSheet.create({
+        container: {
+            ...components?.iconButton?.container,
+        },
+        disabled: {
+            opacity: opacities[60],
+            ...components?.iconButton?.disabled,
+        },
+        pressed: {
+            opacity: opacities[60],
+            ...components?.iconButton?.pressed,
+        },
+    });
+};

package/dist/primitives/IconButton/types.d.ts

@@ -1,6 +1,8 @@
-import { ColorValue, ImageSourcePropType, ImageStyle, PressableProps, StyleProp } from 'react-native';
+import { ColorValue, ImageSourcePropType, ImageStyle, PressableProps, StyleProp, ViewStyle } from 'react-native';
 export interface IconButtonStyles {
-    icon: ImageStyle;
+    container?: ViewStyle;
+    disabled?: ViewStyle;
+    pressed?: ViewStyle;
 }
 export interface IconButtonProps extends PressableProps {
     /**

package/dist/primitives/Label/Label.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { LabelProps } from './types';
-export default function Label({ accessibilityRole, children, style, ...rest }: LabelProps): JSX.Element;
+export default function Label({ accessibilityRole, children, style, variant, ...rest }: LabelProps): JSX.Element;

package/dist/primitives/Label/Label.js

@@ -1,8 +1,12 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { styles } from './styles';
-export default function Label({ accessibilityRole = 'text', children, style, ...rest }) {
-    return (<Text {...rest} accessibilityRole={accessibilityRole} style={[styles.label, style]}>
+import { useTheme } from '../../theme';
+import { getThemedStyles } from './styles';
+export default function Label({ accessibilityRole = 'text', children, style, variant = 'primary', ...rest }) {
+    const theme = useTheme();
+    const themedStyle = getThemedStyles(theme);
+    const textStyle = [themedStyle.text, themedStyle[variant], style];
+    return (<Text {...rest} accessibilityRole={accessibilityRole} style={textStyle}>
       {children}
     </Text>);
 }

package/dist/primitives/Label/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Label } from './Label';
-export { LabelProps } from './types';
+export { LabelProps, LabelStyles } from './types';

package/dist/primitives/Label/styles.d.ts

@@ -1,2 +1,3 @@
+import { StrictTheme } from '../../theme';
 import { LabelStyles } from './types';
-export declare const styles: LabelStyles;
+export declare const getThemedStyles: (theme: StrictTheme) => LabelStyles;

package/dist/primitives/Label/styles.js

@@ -1,4 +1,41 @@
 import { StyleSheet } from 'react-native';
-export const styles = StyleSheet.create({
-    label: { fontSize: 16, marginVertical: 2, marginHorizontal: 4 },
-});
+import { getLineHeight } from '../../utils';
+export const getThemedStyles = (theme) => {
+    const { components, tokens: { colors, fontSizes, fontWeights }, } = theme;
+    return StyleSheet.create({
+        text: {
+            fontSize: fontSizes.small,
+            fontWeight: fontWeights.normal,
+            lineHeight: getLineHeight(fontSizes.small),
+            ...components?.label?.text,
+        },
+        primary: {
+            color: colors.font.primary,
+            ...components?.label?.primary,
+        },
+        secondary: {
+            color: colors.font.secondary,
+            ...components?.label?.secondary,
+        },
+        tertiary: {
+            color: colors.font.tertiary,
+            ...components?.label?.tertiary,
+        },
+        error: {
+            color: colors.font.error,
+            ...components?.label?.error,
+        },
+        warning: {
+            color: colors.font.warning,
+            ...components?.label?.warning,
+        },
+        success: {
+            color: colors.font.success,
+            ...components?.label?.success,
+        },
+        info: {
+            color: colors.font.info,
+            ...components?.label?.info,
+        },
+    });
+};

package/dist/primitives/Label/types.d.ts

@@ -1,7 +1,20 @@
 import { TextProps, TextStyle } from 'react-native';
 export interface LabelProps extends TextProps {
+    /**
+     * @description
+     * The variant property will affect the color of the Label.
+     */
+    variant?: LabelVariant;
 }
 export declare type LabelPosition = 'start' | 'end' | 'top' | 'bottom';
+export declare type LabelVariant = 'primary' | 'secondary' | 'tertiary' | 'error' | 'warning' | 'info' | 'success';
 export interface LabelStyles {
-    label: TextStyle;
+    text?: TextStyle;
+    primary?: TextStyle;
+    secondary?: TextStyle;
+    tertiary?: TextStyle;
+    error?: TextStyle;
+    warning?: TextStyle;
+    success?: TextStyle;
+    info?: TextStyle;
 }

package/dist/primitives/PasswordField/PasswordField.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PasswordFieldProps } from './types';
+export default function PasswordField({ disabled, iconAccessibilityLabel, iconStyle, secureTextEntry, showPasswordButton, style, ...rest }: PasswordFieldProps): JSX.Element;

package/dist/primitives/PasswordField/PasswordField.js

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import { icons } from '../../assets';
+import { useTheme } from '../../theme';
+import { IconButton } from '../IconButton';
+import { TextField } from '../TextField';
+import { getThemedStyles } from './styles';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+const { getHidePasswordText, getShowPasswordText } = authenticatorTextUtil;
+export default function PasswordField({ disabled, iconAccessibilityLabel, iconStyle, secureTextEntry = true, showPasswordButton = true, style, ...rest }) {
+    const theme = useTheme();
+    const themedStyle = getThemedStyles(theme);
+    const [obscureText, setObscureText] = useState(secureTextEntry);
+    const handleOnPress = React.useCallback(() => {
+        setObscureText(!obscureText);
+    }, [obscureText]);
+    const toggleVisibilityAccessibilityLabel = iconAccessibilityLabel ?? obscureText
+        ? getShowPasswordText()
+        : getHidePasswordText();
+    return (<TextField {...rest} disabled={disabled} secureTextEntry={obscureText} style={[themedStyle.container, style]} endAccessory={showPasswordButton ? (<IconButton accessibilityLabel={toggleVisibilityAccessibilityLabel} disabled={disabled} iconStyle={[themedStyle.icon, iconStyle]} size={16} source={obscureText ? icons.visibilityOff : icons.visibilityOn} onPress={handleOnPress}/>) : null}/>);
+}

package/dist/primitives/PasswordField/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PasswordField } from './PasswordField';
+export { PasswordFieldProps, PasswordFieldStyles } from './types';

package/dist/primitives/PasswordField/index.js

@@ -0,0 +1 @@
+export { default as PasswordField } from './PasswordField';

package/dist/primitives/PasswordField/styles.d.ts

@@ -0,0 +1,3 @@
+import { StrictTheme } from '../../theme';
+import { PasswordFieldStyles } from './types';
+export declare const getThemedStyles: ({ components, tokens: { colors }, }: StrictTheme) => PasswordFieldStyles;

package/dist/primitives/PasswordField/styles.js

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+export const getThemedStyles = ({ components, tokens: { colors }, }) => {
+    return StyleSheet.create({
+        container: {
+            ...components?.passwordField?.container,
+        },
+        icon: {
+            // match to `TextField` placeholder color
+            tintColor: colors.font.tertiary,
+            ...components?.passwordField?.icon,
+        },
+    });
+};

package/dist/primitives/PasswordField/types.d.ts

@@ -0,0 +1,23 @@
+import { ImageStyle } from 'react-native';
+import { IconButtonProps } from '../IconButton';
+import { TextFieldProps, TextFieldStyles } from '../TextField';
+export interface PasswordFieldProps extends TextFieldProps {
+    /**
+     * @description
+     * For password fields, will toggle visibility of the "show password" button
+     */
+    showPasswordButton?: boolean;
+    /**
+     * @description
+     * Styling for the icon
+     */
+    iconStyle?: IconButtonProps['iconStyle'];
+    /**
+     * @description
+     * Accessibility label for the icon
+     */
+    iconAccessibilityLabel?: string;
+}
+export interface PasswordFieldStyles extends Partial<TextFieldStyles> {
+    icon?: ImageStyle;
+}

package/dist/primitives/PasswordField/types.js

@@ -0,0 +1 @@
+export {};

package/dist/primitives/PhoneNumberField/PhoneNumberField.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PhoneNumberFieldProps } from './types';
+export default function PhoneNumberField({ disabled, fieldStyle, labelStyle, style, ...rest }: PhoneNumberFieldProps): JSX.Element;

package/dist/primitives/PhoneNumberField/PhoneNumberField.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { useTheme } from '../../theme';
+import { getThemedStyles } from './styles';
+import { TextField } from '../TextField';
+export default function PhoneNumberField({ disabled, fieldStyle, labelStyle, style, ...rest }) {
+    const theme = useTheme();
+    const themedStyle = getThemedStyles(theme);
+    return (<TextField {...rest} disabled={disabled} fieldStyle={[themedStyle.field, fieldStyle]} keyboardType="phone-pad" labelStyle={[themedStyle.label, labelStyle]} style={[themedStyle.container, style]}/>);
+}

package/dist/primitives/PhoneNumberField/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PhoneNumberField } from './PhoneNumberField';
+export { PhoneNumberFieldProps, PhoneNumberFieldStyles } from './types';

package/dist/primitives/PhoneNumberField/index.js

@@ -0,0 +1 @@
+export { default as PhoneNumberField } from './PhoneNumberField';

package/dist/primitives/PhoneNumberField/styles.d.ts

@@ -0,0 +1,3 @@
+import { StrictTheme } from '../../theme';
+import { PhoneNumberFieldStyles } from './types';
+export declare const getThemedStyles: (theme: StrictTheme) => PhoneNumberFieldStyles;

package/dist/primitives/PhoneNumberField/styles.js

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+export const getThemedStyles = (theme) => {
+    const { components } = theme;
+    return StyleSheet.create({
+        container: {
+            ...components?.phoneNumberField?.container,
+        },
+        fieldContainer: {
+            ...components?.phoneNumberField?.fieldContainer,
+        },
+        field: {
+            ...components?.phoneNumberField?.field,
+        },
+        label: {
+            ...components?.phoneNumberField?.label,
+        },
+    });
+};

package/dist/primitives/PhoneNumberField/types.d.ts

@@ -0,0 +1,5 @@
+import { TextFieldProps, TextFieldStyles } from '../TextField';
+export interface PhoneNumberFieldProps extends Omit<TextFieldProps, 'secureTextEntry'> {
+}
+export interface PhoneNumberFieldStyles extends Partial<TextFieldStyles> {
+}

package/dist/primitives/PhoneNumberField/types.js

@@ -0,0 +1 @@
+export {};

package/dist/primitives/Radio/Radio.d.ts

@@ -1,2 +1,5 @@
+/// <reference types="react" />
 import { RadioProps } from './types';
-export default function Radio<T>({ accessibilityRole, disabled, label, labelPosition, labelStyle, onChange, radioContainerStyle, radioDotStyle, selected, size, style, value, ...rest }: RadioProps<T>): JSX.Element;
+export declare const CONTAINER_TEST_ID = "amplify__radio-button__container";
+export declare const DOT_TEST_ID = "amplify__radio-button__dot";
+export default function Radio<T>({ accessibilityRole, disabled, label, labelPosition, labelStyle, onChange, onPress, radioContainerStyle, radioDotStyle, selected, size, style, value, ...rest }: RadioProps<T>): JSX.Element;

package/dist/primitives/Radio/Radio.js

@@ -1,28 +1,38 @@
 import React, { useCallback, useMemo } from 'react';
 import { Pressable, View, } from 'react-native';
+import { useTheme } from '../../theme';
 import { Label } from '../Label';
 import { getFlexDirectionFromLabelPosition } from '../Label/utils';
-import { styles } from './styles';
+import { getThemedStyles } from './styles';
 import { getRadioDimensions } from './getRadioDimensions';
-export default function Radio({ accessibilityRole = 'radio', disabled, label, labelPosition = 'end', labelStyle, onChange, radioContainerStyle, radioDotStyle, selected, size = 'medium', style, value, ...rest }) {
-    const handleOnChange = useCallback(() => {
+export const CONTAINER_TEST_ID = 'amplify__radio-button__container';
+export const DOT_TEST_ID = 'amplify__radio-button__dot';
+export default function Radio({ accessibilityRole = 'radio', disabled, label, labelPosition = 'end', labelStyle, onChange, onPress, radioContainerStyle, radioDotStyle, selected, size = 'medium', style, value, ...rest }) {
+    const theme = useTheme();
+    const themedStyle = getThemedStyles(theme);
+    const handleOnChange = useCallback((event) => {
         if (!disabled) {
             onChange?.(value);
+            onPress?.(event);
         }
-    }, [onChange, value, disabled]);
+    }, [disabled, onChange, onPress, value]);
     const containerStyle = useCallback(({ pressed }) => {
         const containerStyle = {
-            ...styles.container,
+            ...themedStyle.container,
             flexDirection: getFlexDirectionFromLabelPosition(labelPosition),
-            ...(disabled && styles.disabled),
+            ...(disabled && themedStyle.disabled),
         };
         const pressedStateStyle = typeof style === 'function' ? style({ pressed }) : style;
         return [containerStyle, pressedStateStyle];
-    }, [disabled, labelPosition, style]);
-    const { radioContainerSize, radioDotSize } = useMemo(() => getRadioDimensions(size, styles), [size]);
+    }, [disabled, labelPosition, style, themedStyle]);
+    const { radioContainerDimensions, radioDotDimensions } = useMemo(() => getRadioDimensions(size, themedStyle), [size, themedStyle]);
     return (<Pressable {...rest} accessibilityRole={accessibilityRole} onPress={handleOnChange} style={containerStyle}>
-      <View style={[styles.radioContainer, radioContainerSize, radioContainerStyle]}>
-        {selected ? (<View style={[styles.radioDot, radioDotSize, radioDotStyle]}/>) : null}
+      <View style={[
+            themedStyle.radioContainer,
+            radioContainerDimensions,
+            radioContainerStyle,
+        ]} testID={CONTAINER_TEST_ID}>
+        {selected ? (<View style={[themedStyle.radioDot, radioDotDimensions, radioDotStyle]} testID={DOT_TEST_ID}/>) : null}
       </View>
       {label ? <Label style={labelStyle}>{label}</Label> : null}
     </Pressable>);

package/dist/primitives/Radio/getRadioDimensions.d.ts

@@ -12,7 +12,13 @@ import { RadioDimensions, RadioStyles, Size } from './types';
  * then we return the respective dimensions as defined in the `styles` object
  * (e.g., 'small' => { radioContainerSmall, radioDotSmall } )
  */
-export declare const getRadioDimensions: (size: Size, styles: RadioStyles) => {
-    radioContainerSize: RadioDimensions;
-    radioDotSize: RadioDimensions;
+/**
+ * We landed on this value for the ratio of the Radio dot to the Radio container
+ * because it looks aesthetically proportional. Incidentally, this value is also
+ * an approximation of the golden ratio conjugate.
+ */
+export declare const RADIO_DOT_PROPORTION = 0.6;
+export declare const getRadioDimensions: (size: Size, styles: Required<RadioStyles>) => {
+    radioContainerDimensions: RadioDimensions;
+    radioDotDimensions: RadioDimensions;
 };

package/dist/primitives/Radio/getRadioDimensions.js

@@ -12,16 +12,28 @@ import { capitalize } from '../../utils';
  * then we return the respective dimensions as defined in the `styles` object
  * (e.g., 'small' => { radioContainerSmall, radioDotSmall } )
  */
+/**
+ * We landed on this value for the ratio of the Radio dot to the Radio container
+ * because it looks aesthetically proportional. Incidentally, this value is also
+ * an approximation of the golden ratio conjugate.
+ */
+export const RADIO_DOT_PROPORTION = 0.6;
 export const getRadioDimensions = (size, styles) => {
     if (typeof size === 'number') {
         return {
-            radioContainerSize: { height: size, width: size },
-            radioDotSize: { height: size * 0.5, width: size * 0.5 },
+            radioContainerDimensions: {
+                height: size,
+                width: size,
+            },
+            radioDotDimensions: {
+                height: size * RADIO_DOT_PROPORTION,
+                width: size * RADIO_DOT_PROPORTION,
+            },
         };
     }
     const sizeKey = capitalize(size);
     return {
-        radioContainerSize: styles[`radioContainer${sizeKey}`],
-        radioDotSize: styles[`radioDot${sizeKey}`],
+        radioContainerDimensions: styles[`radioContainer${sizeKey}`],
+        radioDotDimensions: styles[`radioDot${sizeKey}`],
     };
 };

package/dist/primitives/Radio/styles.d.ts

@@ -1,2 +1,3 @@
+import { StrictTheme } from '../../theme';
 import { RadioStyles } from './types';
-export declare const styles: RadioStyles;
+export declare const getThemedStyles: (theme: StrictTheme) => Required<RadioStyles>;