@fluentui-react-native/menu 1.4.33 → 1.5.0

package/src/MenuItemCheckbox/MenuItemCheckbox.types.ts

@@ -38,6 +38,52 @@ export interface MenuItemCheckboxTokens
    */
   iconSize?: number;
 
+  /**
+   * Color of the background of the box containing the checkmark.
+   * @platform android
+   */
+  checkboxBackgroundColor?: ColorValue;
+
+  /**
+   * Color of the border of the box containing the checkmark.
+   * @platform android
+   */
+  checkboxBorderColor?: ColorValue;
+
+  /**
+   * Border radius of the box containing the checkmark.
+   * @platform android
+   */
+  checkboxBorderRadius?: number;
+
+  /**
+   * Width of the border around the box containing the checkmark.
+   * @platform android
+   */
+  checkboxBorderWidth?: number;
+
+  /**
+   * Height and width of the box containing the checkmark.
+   * @platform android
+   */
+  checkboxSize?: number;
+
+  /**
+   * Ripple color for Android.
+   *
+   * A ripple animation is shown on click for Android. This sets the color of the ripple.
+   * @platform android
+   */
+  rippleColor?: ColorValue;
+
+  /**
+   * Ripple radius for circular radio on Android.
+   *
+   * A ripple animation is shown on click for Android. This sets the radius of the circular ripple shown on the radio button.
+   * @platform android
+   */
+  rippleRadius?: number;
+
   /**
    * States of the item control
    */
@@ -62,6 +108,7 @@ export interface MenuItemCheckboxInfo {
 
 export interface MenuItemCheckboxSlotProps {
   root: React.PropsWithRef<PressablePropsExtended>;
+  checkbox?: PressablePropsExtended; // Android only
   checkmark?: XmlProps;
   content?: TextProps;
   iconPlaceholder?: React.PropsWithRef<IViewProps>;

package/src/MenuItemCheckbox/MenuItemCheckboxTokens.android.ts

@@ -0,0 +1,46 @@
+import type { Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import type { TokenSettings } from '@fluentui-react-native/use-styling';
+
+import type { MenuItemCheckboxTokens } from './MenuItemCheckbox.types';
+
+export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens, Theme> = (t: Theme): MenuItemCheckboxTokens => ({
+  checkmarkSize: globalTokens.size120,
+  checkmarkVisibility: 0,
+  color: t.colors.neutralForeground1,
+  variant: 'body1',
+  gap: globalTokens.size160,
+  iconColor: t.colors.neutralForeground2,
+  iconSize: globalTokens.size200,
+  maxWidth: 300,
+  paddingVertical: globalTokens.size60,
+  paddingHorizontal: globalTokens.size160,
+  checkmarkPadding: globalTokens.sizeNone,
+  checkboxBorderWidth: globalTokens.stroke.width15,
+  checkboxBorderRadius: globalTokens.corner.radius40,
+  checkboxSize: globalTokens.size200,
+  checkboxBorderColor: t.colors.neutralStrokeAccessible,
+
+  rippleColor: '#D4D4D4',
+  pressed: {
+    backgroundColor: t.colors.neutralBackground1Pressed,
+  },
+  disabled: {
+    backgroundColor: t.colors.neutralBackground1,
+    checkboxBorderColor: t.colors.neutralStrokeDisabled,
+    color: t.colors.neutralForegroundDisabled1,
+    iconColor: t.colors.neutralForegroundDisabled,
+    // Unselected, Disabled
+    rippleColor: '#D4D4D4',
+    checked: {
+      checkboxBackgroundColor: t.colors.brandBackgroundDisabled,
+      checkmarkVisibility: 1,
+    },
+  },
+  checked: {
+    checkmarkVisibility: 1,
+    checkboxBackgroundColor: t.colors.brandBackground,
+    checkboxBorderWidth: globalTokens.stroke.widthNone,
+    checkmarkColor: t.colors.neutralForegroundOnColor,
+  },
+});

package/src/MenuItemRadio/MenuItemRadio.styling.android.ts

@@ -0,0 +1,98 @@
+import { Platform } from 'react-native';
+
+import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework';
+import { buildProps } from '@fluentui-react-native/framework';
+import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens';
+
+import type { MenuItemRadioProps, MenuItemRadioSlotProps } from './MenuItemRadio.types';
+import { menuItemRadioName } from './MenuItemRadio.types';
+import { defaultMenuItemRadioTokens } from './MenuItemRadioTokens';
+import type { MenuItemRadioTokens } from '../MenuItemRadio/MenuItemRadio.types';
+
+export const menuItemRadioStates: (keyof MenuItemRadioTokens)[] = ['hovered', 'focused', 'pressed', 'disabled', 'checked'];
+
+export const stylingSettings: UseStylingOptions<MenuItemRadioProps, MenuItemRadioSlotProps, MenuItemRadioTokens> = {
+  tokens: [defaultMenuItemRadioTokens, menuItemRadioName],
+  states: menuItemRadioStates,
+  slotProps: {
+    root: buildProps(
+      (tokens: MenuItemRadioTokens, theme: Theme) => ({
+        style: {
+          alignItems: 'center',
+          backgroundColor: tokens.backgroundColor,
+          display: 'flex',
+          flexDirection: 'row',
+          ...layoutStyles.from(tokens, theme),
+          ...borderStyles.from(tokens, theme),
+        },
+      }),
+      ['backgroundColor', ...borderStyles.keys, ...layoutStyles.keys],
+    ),
+
+    radioButton: buildProps(
+      (tokens: MenuItemRadioTokens) => ({
+        style: {
+          backgroundColor: 'transparent',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginEnd: tokens.paddingHorizontal,
+          width: tokens.radioOuterCircleSize,
+          height: tokens.radioOuterCircleSize,
+          borderWidth: tokens.radioBorderWidth,
+          borderStyle: tokens.radioBorderStyle,
+          borderRadius: tokens.radioOuterCircleSize / 2,
+          borderColor: tokens.radioBorder,
+        },
+        android_ripple: { color: tokens.rippleColor, radius: tokens.rippleRadius, borderless: true },
+      }),
+      ['radioBorderWidth', 'radioBorderStyle', 'radioOuterCircleSize', 'rippleColor', 'rippleRadius', 'radioBorder'],
+    ),
+
+    radioInnerCircle: buildProps(
+      (tokens: MenuItemRadioTokens) => ({
+        style: {
+          opacity: tokens.radioVisibility,
+          borderRadius: tokens.radioInnerCircleSize / 2,
+          height: tokens.radioInnerCircleSize,
+          width: tokens.radioInnerCircleSize,
+          backgroundColor: tokens.radioFill,
+        },
+      }),
+      ['radioInnerCircleSize', 'radioVisibility', 'radioFill'],
+    ),
+
+    content: buildProps(
+      (tokens: MenuItemRadioTokens, theme: Theme) => ({
+        style: {
+          flexGrow: 1,
+          color: tokens.color,
+          ...(Platform.OS === 'android' && { flexShrink: 1 }),
+          ...fontStyles.from(tokens, theme),
+        },
+      }),
+      ['color', ...fontStyles.keys],
+    ),
+    iconPlaceholder: buildProps(
+      (tokens: MenuItemRadioTokens) => ({
+        style: {
+          minHeight: tokens.iconSize,
+          minWidth: tokens.iconSize,
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginEnd: tokens.gap,
+        },
+      }),
+      ['checkmarkSize', 'gap'],
+    ),
+    imgIcon: buildProps(
+      (tokens: MenuItemRadioTokens) => ({
+        style: { tintColor: tokens.iconColor, height: tokens.iconSize, width: tokens.iconSize },
+      }),
+      ['gap', 'iconColor', 'iconSize'],
+    ),
+    fontOrSvgIcon: buildProps(
+      (tokens: MenuItemRadioTokens) => ({ color: tokens.iconColor, size: tokens.iconSize }),
+      ['gap', 'iconColor', 'iconSize'],
+    ),
+  },
+};

package/src/MenuItemRadio/MenuItemRadio.styling.ts

@@ -0,0 +1,75 @@
+import { Platform } from 'react-native';
+
+import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework';
+import { buildProps } from '@fluentui-react-native/framework';
+import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens';
+
+import type { MenuItemRadioProps, MenuItemRadioSlotProps, MenuItemRadioTokens } from './MenuItemRadio.types';
+import { menuItemRadioName } from './MenuItemRadio.types';
+import { defaultMenuItemRadioTokens } from './MenuItemRadioTokens';
+
+export const menuItemRadioStates: (keyof MenuItemRadioTokens)[] = ['hovered', 'focused', 'pressed', 'disabled', 'checked'];
+
+export const stylingSettings: UseStylingOptions<MenuItemRadioProps, MenuItemRadioSlotProps, MenuItemRadioTokens> = {
+  tokens: [defaultMenuItemRadioTokens, menuItemRadioName],
+  states: menuItemRadioStates,
+  slotProps: {
+    root: buildProps(
+      (tokens: MenuItemRadioTokens, theme: Theme) => ({
+        style: {
+          alignItems: 'center',
+          backgroundColor: tokens.backgroundColor,
+          display: 'flex',
+          flexDirection: 'row',
+          ...layoutStyles.from(tokens, theme),
+          ...borderStyles.from(tokens, theme),
+        },
+      }),
+      ['backgroundColor', ...borderStyles.keys, ...layoutStyles.keys],
+    ),
+    checkmark: buildProps(
+      (tokens: MenuItemRadioTokens) => ({
+        opacity: tokens.checkmarkVisibility,
+        color: tokens.checkmarkColor ?? tokens.color,
+        height: tokens.checkmarkSize,
+        width: tokens.checkmarkSize,
+        viewBox: '0 0 ' + (tokens.checkmarkSize - tokens.checkmarkPadding * 2) + ' ' + (tokens.checkmarkSize - tokens.checkmarkPadding * 2),
+        ...(Platform.OS !== 'android' && { style: { marginEnd: tokens.gap } }),
+      }),
+      ['checkmarkPadding', 'checkmarkSize', 'checkmarkVisibility', 'color', 'gap'],
+    ),
+    content: buildProps(
+      (tokens: MenuItemRadioTokens, theme: Theme) => ({
+        style: {
+          flexGrow: 1,
+          color: tokens.color,
+          ...(Platform.OS === 'android' && { flexShrink: 1 }),
+          ...fontStyles.from(tokens, theme),
+        },
+      }),
+      ['color', ...fontStyles.keys],
+    ),
+    iconPlaceholder: buildProps(
+      (tokens: MenuItemRadioTokens) => ({
+        style: {
+          minHeight: tokens.iconSize,
+          minWidth: tokens.iconSize,
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginEnd: tokens.gap,
+        },
+      }),
+      ['checkmarkSize', 'gap'],
+    ),
+    imgIcon: buildProps(
+      (tokens: MenuItemRadioTokens) => ({
+        style: { tintColor: tokens.iconColor, height: tokens.iconSize, width: tokens.iconSize },
+      }),
+      ['gap', 'iconColor', 'iconSize'],
+    ),
+    fontOrSvgIcon: buildProps(
+      (tokens: MenuItemRadioTokens) => ({ color: tokens.iconColor, size: tokens.iconSize }),
+      ['gap', 'iconColor', 'iconSize'],
+    ),
+  },
+};

package/src/MenuItemRadio/MenuItemRadio.tsx

@@ -1,17 +1,76 @@
-import type { UseSlots } from '@fluentui-react-native/framework';
+/** @jsx withSlots */
+import React from 'react';
+import { Image, Platform, Pressable, View } from 'react-native';
 
-import { useMenuItemRadio } from './useMenuItemRadio';
-import { MenuItemCheckbox, menuItemFinalRender } from '../MenuItemCheckbox/MenuItemCheckbox';
-import type { MenuItemCheckboxProps, MenuItemCheckboxType } from '../MenuItemCheckbox/MenuItemCheckbox.types';
+import type { Slots, UseSlots } from '@fluentui-react-native/framework';
+import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework';
+import { IconV1 as Icon } from '@fluentui-react-native/icon';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+import { SvgXml } from 'react-native-svg';
 
-export const menuItemRadioName = 'MenuItemRadio';
+import { stylingSettings } from './MenuItemRadio.styling';
+import type { MenuItemRadioInfo, MenuItemRadioProps, MenuItemRadioSlotProps, MenuItemRadioType } from './MenuItemRadio.types';
+import { menuItemRadioName } from './MenuItemRadio.types';
+import { useMenuItemRadio } from './useMenuItemRadio';
+import { getAccessibilityLabel, getTooltip } from '../MenuItem/MenuItem';
 
-export const MenuItemRadio = MenuItemCheckbox.compose({
+export const MenuItemRadio = compose<MenuItemRadioType>({
   displayName: menuItemRadioName,
-  useRender: (userProps: MenuItemCheckboxProps, useSlots: UseSlots<MenuItemCheckboxType>) => {
+  ...stylingSettings,
+  slots: {
+    root: Pressable,
+    radioInnerCircle: View,
+    radioButton: Pressable,
+    checkmark: SvgXml,
+    content: Text,
+    iconPlaceholder: View,
+    imgIcon: Image,
+    fontOrSvgIcon: Icon,
+  },
+  useRender: (userProps: MenuItemRadioProps, useSlots: UseSlots<MenuItemRadioType>) => {
     const menuItem = useMenuItemRadio(userProps);
-    const Slots = useSlots(userProps, (layer): boolean => menuItem.state[layer]);
+    const Slots = useSlots(userProps, (layer): boolean => menuItem.state[layer] || userProps[layer]);
 
-    return menuItemFinalRender(menuItem, Slots);
+    return menuItemRadioFinalRender(menuItem, Slots);
   },
 });
+
+export const menuItemRadioFinalRender = (
+  menuItem: MenuItemRadioInfo,
+  Slots: Slots<MenuItemRadioSlotProps>,
+): React.FunctionComponent<MenuItemRadioProps> => {
+  return (final: MenuItemRadioProps, children: React.ReactNode) => {
+    const { accessibilityLabel, icon, tooltip, ...mergedProps } = mergeProps(menuItem.props, final);
+
+    const checkmarkXml = `
+    <svg>
+      <path fill='currentColor' d='M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z' />
+    </svg>`;
+
+    const label = getAccessibilityLabel(accessibilityLabel, children[0]);
+    const tooltipResult = getTooltip(tooltip, menuItem.state.hasTooltips, children[0]);
+
+    return (
+      <Slots.root {...mergedProps} accessibilityLabel={label}>
+        {Platform.OS === 'android' ? (
+          <Slots.radioButton onPress={mergedProps.onPress} accessible={false} focusable={false}>
+            <Slots.radioInnerCircle />
+          </Slots.radioButton>
+        ) : (
+          <Slots.checkmark accessible={false} xml={checkmarkXml} />
+        )}
+        {(icon || menuItem.state.hasIcons) && (
+          <Slots.iconPlaceholder accessible={false}>
+            {icon && icon.source && <Slots.imgIcon accessible={false} {...icon} />}
+            {icon && (icon.svgSource || icon.fontSource) && <Slots.fontOrSvgIcon accessible={false} {...icon} />}
+          </Slots.iconPlaceholder>
+        )}
+        {children && (
+          <Slots.content accessible={false} tooltip={tooltipResult}>
+            {children}
+          </Slots.content>
+        )}
+      </Slots.root>
+    );
+  };
+};

package/src/MenuItemRadio/MenuItemRadio.types.ts

@@ -0,0 +1,190 @@
+import type * as React from 'react';
+import type { ColorValue, ImageProps, ViewStyle } from 'react-native';
+
+import type { IViewProps } from '@fluentui-react-native/adapters';
+import type { IconPropsV1 as IconProps } from '@fluentui-react-native/icon';
+import type { PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks';
+import type { TextProps } from '@fluentui-react-native/text';
+import type { XmlProps } from 'react-native-svg';
+
+import type { MenuItemProps, MenuItemTokens } from '../MenuItem/MenuItem.types';
+
+export const menuItemRadioName = 'MenuItemRadio';
+
+export interface MenuItemRadioTokens
+  extends Omit<MenuItemTokens, 'submenuIndicatorPadding' | 'submenuIndicatorSize' | 'disabled' | 'focused' | 'hovered' | 'pressed'> {
+  /**
+   * Color of the checkmark icon
+   */
+  checkmarkColor?: ColorValue;
+
+  /**
+   * Amount of space in pixels around the checkmark icon
+   */
+  checkmarkPadding?: number;
+
+  /**
+   * Visibility of the checkmark icon from 0 to 1
+   */
+  checkmarkVisibility?: number;
+
+  /**
+   * Color of the icon
+   */
+  iconColor?: ColorValue;
+
+  /**
+   * Size of the icon. Pixels for SVG and points for font icon.
+   */
+  iconSize?: number;
+
+  /**
+   * Color of the background of the box containing the checkmark.
+   * @platform android
+   */
+  checkboxBackgroundColor?: ColorValue;
+
+  /**
+   * Color of the border of the box containing the checkmark.
+   * @platform android
+   */
+  checkboxBorderColor?: ColorValue;
+
+  /**
+   * Border radius of the box containing the checkmark.
+   * @platform android
+   */
+  checkboxBorderRadius?: number;
+
+  /**
+   * Width of the border around the box containing the checkmark.
+   * @platform android
+   */
+  checkboxBorderWidth?: number;
+
+  /**
+   * Height and width of the box containing the checkmark.
+   * @platform android
+   */
+  checkboxSize?: number;
+
+  /**
+   * Ripple color for Android.
+   *
+   * A ripple animation is shown on click for Android. This sets the color of the ripple.
+   * @platform android
+   */
+  rippleColor?: ColorValue;
+
+  /**
+   * Color of the background of the box containing the radio.
+   * @platform android
+   */
+  radioBackgroundColor?: ColorValue;
+
+  /**
+   * Color of the border of the box containing the radio.
+   * @platform android
+   */
+  radioBorderColor?: ColorValue;
+
+  /**
+   * Border radius of the box containing the radio.
+   * @platform android
+   */
+  radioBorderRadius?: number;
+
+  /**
+   * Height and width of the box containing the radio.
+   * @platform android
+   */
+  radioSize?: number;
+
+  /**
+   * Indicator  radio border color
+   * @platform android
+   */
+  radioBorder?: ColorValue;
+
+  /**
+   * Indicator radio border style
+   * @platform android
+   */
+  radioBorderStyle?: ViewStyle['borderStyle'];
+
+  /**
+   * Inner circle color when selected
+   * @platform android
+   */
+  radioFill?: ColorValue;
+
+  /**
+   * Visibility of the radio inner circle from 0 to 1
+   * @platform android
+   */
+  radioVisibility?: number;
+
+  /**
+   * Diameter size of the outer indicator
+   * @platform android
+   */
+  radioOuterCircleSize?: number;
+
+  /**
+   * Diameter size of the inner circle indicator
+   * @platform android
+   */
+  radioInnerCircleSize?: number;
+
+  /**
+   * Border width of Radio
+   * @platform android
+   */
+  radioBorderWidth?: number;
+
+  /**
+   * Ripple radius for circular radio on Android.
+   *
+   * A ripple animation is shown on click for Android. This sets the radius of the circular ripple shown on the radio button.
+   * @platform android
+   */
+  rippleRadius?: number;
+
+  /**
+   * States of the item control
+   */
+  checked?: MenuItemRadioTokens;
+  disabled?: MenuItemRadioTokens;
+  focused?: MenuItemRadioTokens;
+  hovered?: MenuItemRadioTokens;
+  pressed?: MenuItemRadioTokens;
+}
+
+export interface MenuItemRadioProps extends MenuItemProps {
+  /**
+   * Identifier for the control
+   */
+  name: string;
+}
+
+export interface MenuItemRadioInfo {
+  props: MenuItemRadioProps & React.ComponentPropsWithRef<any>;
+  state: PressableState & { hasIcons: boolean; hasTooltips: boolean };
+}
+
+export interface MenuItemRadioSlotProps {
+  root: React.PropsWithRef<PressablePropsExtended>;
+  content?: TextProps;
+  checkmark?: XmlProps;
+  radioButton?: PressablePropsExtended;
+  radioInnerCircle?: React.PropsWithRef<IViewProps>;
+  iconPlaceholder?: React.PropsWithRef<IViewProps>;
+  imgIcon?: ImageProps;
+  fontOrSvgIcon?: IconProps;
+}
+
+export interface MenuItemRadioType {
+  props: MenuItemRadioProps;
+  tokens: MenuItemRadioTokens;
+  slotProps: MenuItemRadioSlotProps;
+}

package/src/MenuItemRadio/MenuItemRadioTokens.android.ts

@@ -0,0 +1,51 @@
+import type { Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import type { TokenSettings } from '@fluentui-react-native/use-styling';
+
+import type { MenuItemRadioTokens } from './MenuItemRadio.types';
+
+export const defaultMenuItemRadioTokens: TokenSettings<MenuItemRadioTokens, Theme> = (t: Theme): MenuItemRadioTokens => ({
+  checkmarkSize: globalTokens.size120,
+  color: t.colors.neutralForeground1,
+  variant: 'body1',
+  gap: globalTokens.size160,
+  iconColor: t.colors.neutralForeground2,
+  iconSize: globalTokens.size200,
+  maxWidth: 300,
+  paddingVertical: globalTokens.size60,
+  paddingHorizontal: globalTokens.size160,
+
+  radioOuterCircleSize: globalTokens.size200,
+  radioInnerCircleSize: globalTokens.size100,
+  radioBorderStyle: 'solid',
+  radioBorderWidth: globalTokens.stroke.width15,
+  rippleRadius: globalTokens.size160,
+
+  // Unselected, Rest
+  radioBorder: t.colors.neutralStrokeAccessible,
+  radioVisibility: 0,
+
+  rippleColor: '#D4D4D4',
+  pressed: {
+    backgroundColor: t.colors.neutralBackground1Pressed,
+  },
+  disabled: {
+    backgroundColor: t.colors.neutralBackground1,
+    color: t.colors.neutralForegroundDisabled1,
+    iconColor: t.colors.neutralForegroundDisabled,
+    // Unselected, Disabled
+    rippleColor: '#D4D4D4',
+    radioBorder: t.colors.neutralStrokeDisabled,
+    radioVisibility: 0,
+    checked: {
+      radioBorder: t.colors.brandBackgroundDisabled,
+      radioFill: t.colors.brandForegroundDisabled2,
+      radioVisibility: 1,
+    },
+  },
+  checked: {
+    radioBorder: t.colors.brandBackground,
+    radioFill: t.colors.brandForeground1,
+    radioVisibility: 1,
+  },
+});

package/src/MenuItemRadio/MenuItemRadioTokens.ts

@@ -0,0 +1,56 @@
+import type { FontWeightValue, Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import type { TokenSettings } from '@fluentui-react-native/use-styling';
+
+import type { MenuItemRadioTokens } from './MenuItemRadio.types';
+
+export const defaultMenuItemRadioTokens: TokenSettings<MenuItemRadioTokens, Theme> = (t: Theme): MenuItemRadioTokens => ({
+  backgroundColor: t.colors.neutralBackground1,
+  borderRadius: globalTokens.corner.radiusNone,
+  checkmarkPadding: globalTokens.size20,
+  checkmarkSize: 16,
+  checkmarkVisibility: 0,
+  color: t.colors.neutralForeground1,
+  fontFamily: t.typography.families.primary,
+  fontSize: globalTokens.font.size200,
+  fontWeight: globalTokens.font.weight.regular as FontWeightValue,
+  gap: globalTokens.size40,
+  iconColor: t.colors.neutralForeground1,
+  iconSize: 16,
+  minHeight: 24,
+  minWidth: 160,
+  maxWidth: 300,
+  padding: globalTokens.size40,
+  paddingHorizontal: globalTokens.size80,
+  pressed: {
+    backgroundColor: t.colors.neutralBackground1Pressed,
+    color: t.colors.neutralForeground1Pressed,
+    iconColor: t.colors.neutralForeground1Pressed,
+    checked: {
+      checkmarkColor: t.colors.neutralForeground1Pressed,
+      checkmarkVisibility: 1,
+    },
+  },
+  disabled: {
+    backgroundColor: t.colors.neutralBackground1,
+    color: t.colors.neutralForegroundDisabled,
+    iconColor: t.colors.neutralForegroundDisabled,
+    checked: {
+      checkmarkColor: t.colors.neutralForegroundDisabled,
+      checkmarkVisibility: 1,
+    },
+  },
+  focused: {
+    backgroundColor: t.colors.neutralBackground1Hover,
+    color: t.colors.neutralForeground1Hover,
+    iconColor: t.colors.neutralForeground1Hover,
+    checked: {
+      checkmarkColor: t.colors.neutralForeground1Hover,
+      checkmarkVisibility: 1,
+    },
+  },
+  checked: {
+    checkmarkColor: t.colors.neutralForeground1,
+    checkmarkVisibility: 1,
+  },
+});

package/src/MenuItemRadio/index.ts

@@ -1,2 +1,10 @@
-export { MenuItemRadio, menuItemRadioName } from './MenuItemRadio';
+export { MenuItemRadio } from './MenuItemRadio';
 export { useMenuItemRadio } from './useMenuItemRadio';
+export type {
+  MenuItemRadioInfo,
+  MenuItemRadioProps,
+  MenuItemRadioSlotProps,
+  MenuItemRadioTokens,
+  MenuItemRadioType,
+  menuItemRadioName,
+} from './MenuItemRadio.types';

package/src/MenuItemRadio/useMenuItemRadio.ts

@@ -4,10 +4,10 @@ import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'
 
 import { useMenuContext } from '../context/menuContext';
 import { useMenuListContext } from '../context/menuListContext';
-import type { MenuItemCheckboxProps, MenuItemCheckboxInfo } from '../MenuItemCheckbox/MenuItemCheckbox.types';
 import { useMenuCheckboxInteraction } from '../MenuItemCheckbox/useMenuItemCheckbox';
+import type { MenuItemRadioProps, MenuItemRadioInfo } from '../MenuItemRadio/MenuItemRadio.types';
 
-export const useMenuItemRadio = (props: MenuItemCheckboxProps): MenuItemCheckboxInfo => {
+export const useMenuItemRadio = (props: MenuItemRadioProps): MenuItemRadioInfo => {
   const { disabled, name, persistOnClick } = props;
   const context = useMenuContext();
   const listContext = useMenuListContext();